Někdy může být žádoucí odstranit horní nebo levý okraj z prvního prvku v kontejneru. Podobně pravý nebo dolní okraj od posledního prvku v kontejneru. Můžete to udělat ručním použitím tříd na HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )Nulování „nahoře“ / „dole“ je užitečné pro svislý stoh prvků, nulování „vlevo“ / „vpravo“ je užitečné pro vodorovné řádky (obecně). Ale ... tato metoda závisí na tom, jak sami přidáváte třídy do HTML. Lepší a méně rušivou cestou může být pseudo-selektor:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Možná budete chtít nahradit * konkrétnějšími selektory podle svých potřeb.
„Every Third“ atd.
Řekněme, že jste měli vznášející se blok 9 prvků, 3 ku 3. Je velmi běžné, že možná budete muset odstranit pravý okraj ze 3., 6. a 9. položky. Může tam být schopen n-tý pseudo-selektor:
* > :nth-child(3n+3) ( margin-right: 0; )Rovnice tam, 3n + 3, funguje takto:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
atd.
jQuery
jQuery používá selektory CSS3, které zahrnují: first-child,: last-child a: nth-child (). To znamená, že v prohlížečích, které tyto selektory nepodporují nebo plně nepodporují, budou pracovat v jQuery, takže podporu CSS můžete nahradit podporou JavaScriptu. Například:
$("* > :nth-child(3n+3)").css("margin-right", 0);Podpora prohlížeče
: first-child a: last-child funguje v nejnovější verzi ze všech hlavních prohlížečů, ale ne v IE 6.: first-child je podporován v IE 7+. : nth-child funguje v Safari 3+, Firefox 3.5+ a Chrome 1+, ale v IE8 stále nefunguje.
Viz také článek Davida Olivera.