Às vezes, pode ser desejável remover a margem superior ou esquerda do primeiro elemento em um contêiner. Da mesma forma, a margem direita ou inferior do último elemento em um contêiner. Você pode fazer isso aplicando manualmente as classes ao HTML:
.first ( margin-top: 0 !important; margin-left: 0 !important; ) .last ( margin-bottom: 0 !important; margin-right: 0 !important; )A zeragem “superior” / ”inferior” sendo útil com uma pilha vertical de elementos, a zeragem “esquerda” / ”direita” sendo útil para linhas horizontais (em geral). Mas ... esse método depende de você mesmo adicionar classes ao HTML. Pseudo-seletores podem ser a melhor maneira menos invasiva de fazer:
* > :first-child ( margin-top: 0 !important; margin-left: 0 !important; ) * > :last-child ( margin-bottom: 0 !important; margin-right: 0 !important; )Você pode substituir o * por seletores mais específicos de acordo com suas necessidades.
“Every Third”, etc.
Digamos que você tenha um bloco flutuante de 9 elementos, 3 por 3. É muito comum que você precise remover a margem direita do 3º, 6º e 9º itens. O pseudo-seletor enésimo filho pode ajudar nisso:
* > :nth-child(3n+3) ( margin-right: 0; )A equação aqui, 3n + 3, funciona assim:
(3 × 0) +3 = 3
(3 × 1) +3 = 6
(3 × 2) +3 = 9
etc.
jQuery
jQuery usa seletores CSS3, que incluem: first-child,: last-child e: nth-child (). Isso significa que em navegadores que não suportam ou não suportam totalmente esses seletores, eles funcionarão em jQuery, portanto, você pode substituir o suporte a CSS por suporte a JavaScript. Por exemplo:
$("* > :nth-child(3n+3)").css("margin-right", 0);Suporte de navegador
: first-child e: last-child funcionam na versão mais recente de todos os principais navegadores, mas não no IE 6.: first-child é compatível com o IE 7 ou 7. : nth-child funciona no Safari 3+, Firefox 3.5+ e Chrome 1+, mas ainda não funciona no IE8.
Veja também o artigo de David Oliver.