Det kan undertiden være ønskeligt at fjerne den øverste eller venstre margen fra det første element i en container. Ligeledes højre eller nederste margen fra det sidste element i en container. Du kan gøre dette ved manuelt at anvende klasser på HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Den "øverste" / "nederste" nulstilling er nyttig med en lodret stak af elementer, "venstre" / "højre" nulstilling er nyttig for vandrette rækker (generelt). Men ... denne metode er afhængig af, at du selv tilføjer klasser til HTML. Pseudovælgere kan være en bedre mindre påtrængende vej at gå:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Det kan være en god idé at udskifte * med mere specifikke vælgere efter dine behov.
"Hver tredje" osv.
Lad os sige, at du havde en flydende blok med 9 elementer, 3 ved 3. Det er meget almindeligt, at du muligvis skal fjerne højre margen fra 3., 6. og 9. emne. Den niende barns pseudovælger kan muligvis hjælpe der:
* > :nth-child(3n+3) ( margin-right: 0; )Ligningen der, 3n + 3, fungerer således:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
osv.
jQuery
jQuery bruger CSS3-vælgere, som inkluderer: første barn,: sidste barn og: nth-child (). Dette betyder, at i browsere med ikke eller ikke understøtter disse vælgere fuldt ud, vil de arbejde i jQuery, så du kan erstatte CSS-understøttelsen med JavaScript-understøttelse. For eksempel:
$("* > :nth-child(3n+3)").css("margin-right", 0);Browsersupport
: første barn og: sidste barn arbejder i den seneste udgivelse fra alle større browsere, men ikke i IE 6.: første barn understøttes i IE 7+. : nth-child fungerer i Safari 3+, Firefox 3.5+ og Chrome 1+, men fungerer stadig ikke i IE8.
Se også David Olivers artikel.