Eu tenho uma tag div
contendo várias tags ul
.
I'm capaz de definir propriedades CSS apenas para a primeira tag ul
:
div ul:first-child {
background-color: #900;
}
No entanto, minhas seguintes tentativas de definir propriedades CSS um para o outro ul
tag exceto a primeira don't funcionam:
div ul:not:first-child {
background-color: #900;
}
div ul:not(:first-child) {
background-color: #900;
}
div ul:first-child:after {
background-color: #900;
}
Como posso escrever em CSS: " cada elemento, excepto o primeiro"?
Uma das versões que você postou [realmente funciona][1] para todos os navegadores modernos (onde selectores CSS nível 3 são suportados):
div ul:not(:first-child) {
background-color: #900;
}
Se você precisa suportar navegadores legados, ou se você for impedido pelo seletor `:not''s limitação (ele só aceita um seletor simples como argumento), então você pode utilizar outra técnica:
Defina uma regra que tenha maior alcance do que o que você pretende e depois "revoke" condicionalmente, limitando seu alcance ao que você pretende:
div ul {
background-color: #900; /* applies to every ul */
}
div ul:first-child {
background-color: transparent; /* limits the scope of the previous rule */
}
Ao limitar o escopo use o valor padrão para cada atributo CSS que você está definindo.
Esta solução CSS2 ("qualquer ul
depois de outro ul
") também funciona, e é suportada por mais navegadores.
div ul + ul {
background-color: #900;
}
Ao contrário de :not' e
:nth-sibling', o seletor de irmãos adjacentes é suportado pelo IE7+.
Se você tiver JavaScript muda estas propriedades após o carregamento da página, você deve olhar para alguns bugs conhecidos nas implementações **IE7* e IE8****. Veja este link.
Para qualquer página web estática, isto deve funcionar perfeitamente.
Já que :não
não é aceito por **IE6-8***, eu sugeriria isto:
div ul:nth-child(n+2) {
background-color: #900;
}
Então você escolhe cada ul
em seu elemento pai exceto o primeiro.
Consulte Chris Coyer's "Useful :nth-child Recipes" artigo para mais nth-child
exemplos.