Niekedy môže byť žiaduce odstrániť horný alebo ľavý okraj z prvého prvku v kontajneri. Rovnako tak pravý alebo dolný okraj od posledného prvku v kontajneri. Môžete to urobiť manuálnym použitím tried v HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Vynulovanie „hore“ / „dole“ je užitočné pri vertikálnom zoskupení prvkov, vynulovanie „vľavo“ / „vpravo“ je užitočné pre vodorovné riadky (všeobecne). Ale ... táto metóda závisí od toho, ako sami pridávate triedy do HTML. Pseudo-selektory môžu byť lepšou a menej rušivou cestou:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Možno budete chcieť nahradiť * konkrétnejšími selektormi podľa svojich potrieb.
„Každý tretí“ atď.
Povedzme, že ste mali blok s plávajúcimi 9 prvkami, 3 x 3. Je veľmi bežné, že možno budete musieť odstrániť pravý okraj z 3., 6. a 9. položky. Môže tam pomôcť pseudo-selektor n-tého dieťaťa:
* > :nth-child(3n+3) ( margin-right: 0; )Rovnica tam, 3n + 3, funguje takto:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
atď.
jQuery
jQuery používa selektory CSS3, ktoré zahŕňajú: first-child,: last-child a: nth-child (). To znamená, že v prehliadačoch, ktoré tieto selektory nepodporujú alebo úplne nepodporujú, BUDÚ pracovať v jQuery, takže podporu CSS môžete nahradiť podporou JavaScriptu. Napríklad:
$("* > :nth-child(3n+3)").css("margin-right", 0);Podpora prehliadača
: first-child and: last-child funguje v najnovšom vydaní zo všetkých hlavných prehľadávačov, ale nie v IE 6.: first-child je podporovaný v IE 7+. : nth-child funguje v prehliadačoch Safari 3+, Firefox 3.5+ a Chrome 1+, ale v IE8 stále nefunguje.
Prečítajte si tiež článok Davida Olivera.