Ponekad može biti poželjno ukloniti gornju ili lijevu marginu s prvog elementa u spremniku. Isto tako, desna ili donja margina od zadnjeg elementa u spremniku. To možete učiniti ručnom primjenom klasa na HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Nultiranje "gornje" / "donje" korisno je s okomitim snopom elemenata, nuliranje "lijevo" / "desno" korisno za vodoravne redove (općenito). Ali ... ova metoda ovisi o tome da li sami dodate klase u HTML. Pseudo-selektori mogu biti bolji, manje nametljiv način:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Možda ćete htjeti zamijeniti * s određenijim selektorima prema vašim potrebama.
"Svaki treći" itd.
Pretpostavimo da ste imali plutajući blok od 9 elemenata, 3 puta 3. Vrlo je često da ćete možda trebati ukloniti desnu marginu iz 3., 6. i 9. predmeta. Tu bi vam mogao pomoći pseudo-selektor n-tog djeteta:
* > :nth-child(3n+3) ( margin-right: 0; )Jednadžba tamo, 3n + 3, djeluje ovako:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
itd.
jQuery
jQuery koristi CSS3 selektore, koji uključuju: prvo dijete, posljednje dijete i n-dijete (). To znači da će u preglednicima koji ne podržavaju ili ne podržavaju ove selektore RADITI u jQueryju, tako da CSS podršku možete zamijeniti podrškom za JavaScript. Na primjer:
$("* > :nth-child(3n+3)").css("margin-right", 0);Podrška preglednika
: first-child i: last-child radi u najnovijem izdanju svih glavnih preglednika, ali ne i u IE 6.: first-child je podržan u IE 7+. : nth-child radi u Safariju 3+, Firefoxu 3.5+ i Chromeu 1+, ali još uvijek ne radi u IE8.
Također pogledajte članak Davida Olivera.