Noen ganger kan det være ønskelig å fjerne den øvre eller venstre marg fra det første elementet i en container. Likeledes høyre eller nederste margin fra det siste elementet i en container. Du kan gjøre dette ved å bruke klasser manuelt i HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )"Topp" / "bunn" nullstilling er nyttig med en vertikal stabel med elementer, "venstre" / "høyre" nullstilling er nyttig for horisontale rader (generelt). Men ... denne metoden er avhengig av at du selv legger til klasser i HTML. Pseudovalgere kan være en bedre mindre påtrengende vei å 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 lurt å erstatte * med mer spesifikke velgere i henhold til dine behov.
“Hver tredje” osv.
La oss si at du hadde en flytende blokk med 9 elementer, 3 av 3. Det er veldig vanlig at du kanskje trenger å fjerne høyre marg fra 3., 6. og 9. element. Det niende barnets pseudovelger kan kanskje hjelpe der:
* > :nth-child(3n+3) ( margin-right: 0; )Ligningen der, 3n + 3, fungerer slik:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery bruker CSS3-velgerne, som inkluderer: første barn: siste barn og: nth-child (). Dette betyr at i nettlesere som ikke støtter disse velgerne eller ikke fullt ut, VIL de fungere i jQuery, slik at du kan erstatte CSS-støtten med JavaScript-støtte. For eksempel:
$("* > :nth-child(3n+3)").css("margin-right", 0);Nettleserstøtte
: første barn og: siste barn fungerer i den siste utgivelsen fra alle store nettlesere, men ikke i IE 6.: første barn støttes i IE 7+. : nth-child fungerer i Safari 3+, Firefox 3.5+ og Chrome 1+, men fungerer fortsatt ikke i IE8.
Se også David Olivers artikkel.