Μερικές φορές μπορεί να είναι επιθυμητό να αφαιρέσετε το πάνω ή το αριστερό περιθώριο από το πρώτο στοιχείο σε ένα δοχείο. Ομοίως, το δεξί ή το κάτω περιθώριο από το τελευταίο στοιχείο σε ένα κοντέινερ. Μπορείτε να το κάνετε αυτό εφαρμόζοντας χειροκίνητα μαθήματα στο HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Το μηδενισμό «πάνω» / «κάτω» είναι χρήσιμο με κάθετη στοίβα στοιχείων, το μηδενισμό «αριστερά» / «δεξιά» είναι χρήσιμο για οριζόντιες σειρές (γενικά). Αλλά… αυτή η μέθοδος εξαρτάται από την προσθήκη τάξεων στο HTML μόνοι σας. Οι ψευδο-επιλογείς μπορούν να είναι ένας καλύτερος λιγότερο ενοχλητικός τρόπος:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Μπορεί να θέλετε να αντικαταστήσετε το * με πιο συγκεκριμένους επιλογείς σύμφωνα με τις ανάγκες σας.
«Κάθε τρίτο» κ.λπ.
Ας υποθέσουμε ότι είχατε ένα κινούμενο μπλοκ από 9 στοιχεία, 3 έως 3. Είναι πολύ κοινό ότι ίσως χρειαστεί να αφαιρέσετε το σωστό περιθώριο από το 3ο, το 6ο και το 9ο στοιχείο. Ο ψευδο-επιλογέας του 9ου παιδιού μπορεί να είναι σε θέση να βοηθήσει εκεί:
* > :nth-child(3n+3) ( margin-right: 0; )Η εξίσωση εκεί, 3n + 3, λειτουργεί ως εξής:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
κ.λπ.
jQuery
Το jQuery χρησιμοποιεί επιλογείς CSS3, οι οποίοι περιλαμβάνουν: πρώτο-παιδί,: τελευταίο παιδί και: nth-παιδί (). Αυτό σημαίνει ότι σε προγράμματα περιήγησης που δεν υποστηρίζουν ή δεν υποστηρίζουν πλήρως αυτούς τους επιλογείς, θα λειτουργούν στο jQuery, οπότε μπορείτε να αντικαταστήσετε την υποστήριξη CSS με υποστήριξη JavaScript. Για παράδειγμα:
$("* > :nth-child(3n+3)").css("margin-right", 0);Υποστήριξη προγράμματος περιήγησης
: first-child και: last-child λειτουργεί στην τελευταία έκδοση από όλα τα μεγάλα προγράμματα περιήγησης, αλλά όχι στο IE 6.: Το πρώτο παιδί υποστηρίζεται στο IE 7+. : Το nth-child λειτουργεί σε Safari 3+, Firefox 3.5+ και Chrome 1+, αλλά εξακολουθεί να μην λειτουργεί στο IE8.
Δείτε επίσης το άρθρο του David Oliver.