not: seletor do primeiro filho

Eu tenho uma divtag contendo várias ultags.

Eu sou capaz de definir propriedades CSS apenas para a primeira ultag:

div ul:first-child {
    background-color: #900;
}

No entanto, minhas tentativas a seguir para definir propriedades CSS para cada outra ultag, exceto a primeira, não 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, exceto o primeiro"?

Uma das versões que você postou realmente funciona para todos os navegadores modernos (onde os seletores de CSS nível 3 são suportados ):

div ul:not(:first-child) {
    background-color: #900;
}

Se você precisar oferecer suporte a navegadores herdados ou se estiver prejudicado pela limitação:not do seletor (ele aceita apenas um seletor simples como argumento), poderá usar outra técnica:

Defina uma regra que tenha escopo maior do que o pretendido e, em seguida, "revogue" condicionalmente, limitando o escopo 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á configurando.

Esta solução CSS2 ("qualquer ulapós a outra ul") também funciona e é suportada por mais navegadores.

div ul + ul {
  background-color: #900;
}

Ao contrário :note :nth-sibling, o selector de irmão adjacente é suportado por IE 7 +.

Se o JavaScript alterar essas propriedades após o carregamento da página, observe alguns erros conhecidos nas implementações do IE7 e IE8 . Veja este link .

Para qualquer página estática da web, isso deve funcionar perfeitamente.

Como :notnão é aceito pelo IE6-8 , sugiro o seguinte:

div ul:nth-child(n+2) {
    background-color: #900;
}

Então você escolhe cada ulelemento pai, exceto o primeiro .

Consulte o artigo "Útil: Receitas da nona criança" de Chris Coyer para obter mais nth-child exemplos .

div li~li {
    color: red;
}

Suporta IE7

not(:first-child)parece não funcionar mais. Pelo menos com as versões mais recentes do Chrome e Firefox.

Em vez disso, tente o seguinte:

ul:not(:first-of-type) {}

Você pode usar qualquer seletor com not

p:not(:first-child){}
p:not(:first-of-type){}
p:not(:checked){}
p:not(:last-child){}
p:not(:last-of-type){}
p:not(:first-of-type){}
p:not(:nth-last-of-type(2)){}
p:not(nth-last-child(2)){}
p:not(:nth-child(2)){}

Não tive sorte com algumas das opções acima,

Este foi o único que realmente funcionou para mim

ul:not(:first-of-type) {}

Isso funcionou para mim quando eu estava tentando fazer com que o primeiro botão exibido na página não fosse afetado por uma opção de margem esquerda.

esta foi a opção que tentei primeiro, mas não funcionou

ul:not(:first-child)

Você pode usar o seletor com o :notseguinte, você pode usar qualquer seletor dentro do:not()

any_CSS_selector:not(any_other_CSS_selector){
    /*YOUR STYLE*/
}

você também pode usar :notsem o seletor principal.

   :not(:nth-child(2)){
        /*YOUR STYLE*/
   }

Mais exemplos

any_CSS_selector:not(:first-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:checked){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-child){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:last-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:first-of-type){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-of-type(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-last-child(2)){
    /*YOUR STYLE*/
}
any_CSS_selector:not(:nth-child(2)){
    /*YOUR STYLE*/
}

Como eu usei ul:not(:first-child)é uma solução perfeita.

div ul:not(:first-child) {
    background-color: #900;
}

Por que isso é perfeito porque, usando ul:not(:first-child), podemos aplicar CSS em elementos internos. Como li, img, span, atags etc.

Mas quando usadas outras soluções:

div ul + ul {
  background-color: #900;
}

e

div li~li {
    color: red;
}

e

ul:not(:first-of-type) {}

e

div ul:nth-child(n+2) {
    background-color: #900;
}

Eles restringem apenas o nível ul do CSS. Suponha que não possamos aplicar CSS licomo `div ul + ul li '.

Para elementos de nível interno, a primeira solução funciona perfeitamente.

div ul:not(:first-child) li{
        background-color: #900;
    }

e assim por diante ...