Es kann manchmal wünschenswert sein, den oberen oder linken Rand vom ersten Element in einem Behälter zu entfernen. Ebenso der rechte oder untere Rand des letzten Elements in einem Container. Sie können dies tun, indem Sie Klassen manuell auf den HTML-Code anwenden:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Die Nullung "oben" / "unten" ist bei einem vertikalen Stapel von Elementen nützlich, während die Nullung "links" / "rechts" für horizontale Zeilen (im Allgemeinen) nützlich ist. Aber… diese Methode hängt davon ab, dass Sie dem HTML-Code selbst Klassen hinzufügen. Pseudo-Selektoren können ein besserer, weniger aufdringlicher Weg sein:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Möglicherweise möchten Sie das * gemäß Ihren Anforderungen durch spezifischere Selektoren ersetzen.
"Jedes Drittel" usw.
Nehmen wir an, Sie hatten einen schwebenden Block mit 9 Elementen, 3 x 3. Es ist sehr häufig, dass Sie den rechten Rand von den Elementen 3, 6 und 9 entfernen müssen. Der Pseudo-Selektor für das n-te Kind könnte dort helfen:
* > :nth-child(3n+3) ( margin-right: 0; )Die dortige Gleichung 3n + 3 funktioniert folgendermaßen:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
usw.
jQuery
jQuery verwendet CSS3-Selektoren, darunter: erstes Kind, letztes Kind und n-tes Kind (). Dies bedeutet, dass in Browsern, die diese Selektoren nicht oder nicht vollständig unterstützen, diese in jQuery funktionieren, sodass Sie die CSS-Unterstützung durch JavaScript-Unterstützung ersetzen können. Zum Beispiel:
$("* > :nth-child(3n+3)").css("margin-right", 0);Browser-Unterstützung
: first-child und: last-child funktionieren in der neuesten Version aller gängigen Browser, jedoch nicht in IE 6 .: first-child wird in IE 7+ unterstützt. : n-tes Kind funktioniert in Safari 3+, Firefox 3.5+ und Chrome 1+, funktioniert aber immer noch nicht in IE8.
Siehe auch David Olivers Artikel.