Dažreiz var būt vēlams noņemt augšējo vai kreiso malu no konteinera pirmā elementa. Tāpat labā vai apakšējā mala no konteinera pēdējā elementa. To var izdarīt, manuāli lietojot klases HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )“Augšējā” / “apakšējā” iestatīšana ir noderīga vertikālai elementu kaudzei, “kreisā” / “labā” iestatīšana ir noderīga horizontālām rindām (kopumā). Bet ... šī metode ir atkarīga no tā, vai jūs pats pievienojat klases HTML. Pseido-selektors var būt labāks mazāk uzmācīgs veids:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Varat nomainīt * ar precīzākiem selektoriem atbilstoši savām vajadzībām.
“Katrs trešais” utt.
Pieņemsim, ka jums bija peldošs 9 elementu bloks, 3 pret 3. Tas ir ļoti bieži, ka jums var būt nepieciešams noņemt labo piemali no 3., 6. un 9. vienuma. Iespējams, ka tur var palīdzēt n-tā bērna pseido-selektors:
* > :nth-child(3n+3) ( margin-right: 0; )Tur esošais vienādojums 3n + 3 darbojas šādi:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
utt.
jQuery
jQuery izmanto CSS3 selektorus, kas ietver: first-child,: last-child un: nth-child (). Tas nozīmē, ka pārlūkprogrammās, kuras neatbalsta vai pilnībā neatbalsta šos atlasītājus, tās NODARBINĀS jQuery, tāpēc CSS atbalstu varat aizstāt ar JavaScript atbalstu. Piemēram:
$("* > :nth-child(3n+3)").css("margin-right", 0);Pārlūkprogrammas atbalsts
: first-child un: last-child darbojas jaunākajā versijā no visām galvenajām pārlūkprogrammām, bet ne IE 6: pirmais bērns tiek atbalstīts IE 7+. : n-bērns strādā pārlūkprogrammās Safari 3+, Firefox 3.5+ un Chrome 1+, taču joprojām nedarbojas IE8.
Skatiet arī Deivida Olivera rakstu.