Mõnikord võib olla soovitav eemaldada konteineri esimese elemendi ülemine või vasak serv. Samamoodi konteineri viimase elemendi parem või alumine veeris. Selleks saate HTML-ile klassid käsitsi rakendada:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )„Ülemine” / „alumine” nullimine on kasulik vertikaalsete elementide virnaga, „vasak” / „parem” nullimine on kasulik horisontaalsete ridade jaoks (üldiselt). Kuid ... see meetod sõltub sellest, kas lisate ise HTML-i klassid. Pseudovalijad võivad olla paremad vähem pealetükkivad viisid:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Võite oma * vajadusel asendada * konkreetsemate selektoritega.
“Iga kolmas” jne.
Oletame, et teil oli 9 elemendiga ujukplokk, 3-ga 3-ga. On väga tavaline, et peate võib-olla 3., 6. ja 9. üksusest eemaldama parema veerise. N-nda lapse pseudovalija võib seal aidata:
* > :nth-child(3n+3) ( margin-right: 0; )Sealne võrrand 3n + 3 töötab järgmiselt:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
jne.
jQuery
jQuery kasutab CSS3 valijaid, mille hulka kuuluvad: esimene laps,: viimane laps ja: n-laps (). See tähendab, et brauserites, mis neid valijaid ei toeta või ei toeta neid, töötavad nad jQuery's, nii et saate CSS-i toe asendada JavaScripti toega. Näiteks:
$("* > :nth-child(3n+3)").css("margin-right", 0);Brauseri tugi
: first-child ja: last-child töötab kõigi suuremate brauserite uusimas versioonis, kuid mitte IE 6-s: esimene laps on toetatud versioonis IE 7+. : n-nda laps töötab Safari 3+, Firefox 3.5+ ja Chrome 1+ versioonides, kuid ei tööta siiski IE8-s.
Vaata ka David Oliveri artiklit.