Ibland kan det vara önskvärt att ta bort den övre eller vänstra marginalen från det första elementet i en behållare. På samma sätt höger eller nedre marginal från det sista elementet i en container. Du kan göra detta genom att manuellt tillämpa klasser i HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Den "övre" / "nedre" nollställning är användbar med en vertikal stapel med element, "vänster" / "höger" nollställning är användbar för horisontella rader (i allmänhet). Men ... den här metoden är beroende av att du själv lägger till klasser i HTML-koden. Pseudoväljare kan vara ett bättre, mindre påträngande sätt att gå:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Du kanske vill ersätta * med mer specifika väljare enligt dina behov.
”Var tredje”, etc.
Låt oss säga att du hade ett flytande block med 9 element, 3 gånger 3. Det är mycket vanligt att du kan behöva ta bort höger marginal från 3: e, 6: e och 9: e posten. Det nionde barnets pseudoväljare kan kanske hjälpa till där:
* > :nth-child(3n+3) ( margin-right: 0; )Ekvationen där, 3n + 3, fungerar så här:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery använder CSS3-väljare, som inkluderar: första barn:: sista barn och: nth-child (). Detta innebär att i webbläsare som inte stöder eller inte stöder dessa väljare helt, kommer de att fungera i jQuery, så du kan ersätta CSS-stödet med JavaScript-stöd. Till exempel:
$("* > :nth-child(3n+3)").css("margin-right", 0);Webbläsarstöd
: first-child och: last-child arbetar i den senaste versionen från alla större webbläsare, men inte i IE 6.: first-child stöds i IE 7+. : nth-child fungerar i Safari 3+, Firefox 3.5+ och Chrome 1+, men fungerar fortfarande inte i IE8.
Se även David Olivers artikel.