Včasih je zaželeno odstraniti zgornji ali levi rob s prvega elementa v vsebniku. Prav tako desni ali spodnji rob zadnjega elementa v vsebniku. To lahko storite z ročno uporabo razredov v HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Ničelna nastavitev "zgoraj" / "spodaj" je uporabna pri navpičnem svežnju elementov, nič "levo" / "desno" je uporabna za vodoravne vrstice (na splošno). Toda ... ta metoda je odvisna od tega, da v HTML sami dodate razrede. Psevdo-selektorji so lahko boljša manj vsiljiva pot:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Morda boste želeli * zamenjati z bolj natančnimi izbirniki glede na vaše potrebe.
»Vsak tretji« itd.
Recimo, da ste imeli plavajoči blok z 9 elementi, 3 s 3. Zelo pogosto je, da boste morda morali odstraniti desni rob s 3., 6. in 9. elementa. Tu lahko pomaga psevdo-izbirnik n-tega otroka:
* > :nth-child(3n+3) ( margin-right: 0; )Enačba, 3n + 3, deluje tako:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
itd.
jQuery
jQuery uporablja izbirnike CSS3, ki vključuje: first-child,: last-child in: nth-child (). To pomeni, da bodo v brskalnikih, ki teh izbirnikov ne podpirajo ali jih ne podpirajo v celoti, DELOVALI v jQueryju, tako da lahko podporo CSS nadomestite s podporo JavaScript. Na primer:
$("* > :nth-child(3n+3)").css("margin-right", 0);Podpora brskalnika
: first-child in: last-child deluje v najnovejši izdaji vseh glavnih brskalnikov, ne pa tudi v IE 6.: first-child je podprt v IE 7+. : nth-child deluje v brskalnikih Safari 3+, Firefox 3.5+ in Chrome 1+, vendar v IE8 še vedno ne deluje.
Oglejte si tudi članek Davida Oliverja.