Het kan soms wenselijk zijn om de boven- of linkermarge van het eerste element in een container te verwijderen. Evenzo de rechter- of ondermarge van het laatste element in een container. U kunt dit doen door handmatig klassen toe te passen op de HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )De nulstelling "boven" / "onder" is handig bij een verticale stapel elementen, en "links" / "rechts" op nul zetten is handig voor horizontale rijen (in het algemeen). Maar… deze methode is afhankelijk van het feit of u zelf klassen aan de HTML toevoegt. Pseudo-selectors kunnen een betere, minder opdringerige manier zijn om te gaan:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Misschien wilt u de * vervangen door meer specifieke selectors volgens uw behoeften.
"Every Third", enz.
Stel dat u een zwevend blok had van 9 elementen, 3 bij 3. Het is heel normaal dat u de rechtermarge van de 3e, 6e en 9e items moet verwijderen. De nth-child pseudo-selector kan daar misschien helpen:
* > :nth-child(3n+3) ( margin-right: 0; )De vergelijking daar, 3n + 3, werkt als volgt:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
enz.
jQuery
jQuery gebruikt CSS3-selectors, waaronder: first-child,: last-child en: nth-child (). Dit betekent dat in browsers die deze selectors niet of niet volledig ondersteunen, ze ZULLEN werken in jQuery, dus je kunt de CSS-ondersteuning vervangen door JavaScript-ondersteuning. Bijvoorbeeld:
$("* > :nth-child(3n+3)").css("margin-right", 0);Browser-ondersteuning
: first-child en: last-child werkt in de nieuwste release van alle grote browsers, maar niet in IE 6.: first-child wordt ondersteund in IE 7+. : nth-child werkt in Safari 3+, Firefox 3.5+ en Chrome 1+, maar werkt nog steeds niet in IE8.
Zie ook het artikel van David Oliver.