no: selector de primer hijo

Tengo una divetiqueta que contiene varias uletiquetas.

Puedo configurar las propiedades CSS solo para la primera uletiqueta:

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

Sin embargo, mis siguientes intentos de establecer propiedades CSS para cada uletiqueta, excepto la primera, no funcionan:

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

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

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

¿Cómo puedo escribir en CSS: "cada elemento, excepto el primero"?

Una de las versiones que publicó realmente funciona para todos los navegadores modernos (donde se admiten selectores CSS de nivel 3 ):

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

Si necesita admitir navegadores heredados, o si se ve obstaculizado por la limitación:not del selector (solo acepta un selector simple como argumento), puede usar otra técnica:

Defina una regla que tenga mayor alcance de lo que pretende y luego "revoque" condicionalmente, limitando su alcance a lo que pretende:

div ul {
    background-color: #900;  /* applies to every ul */
}

div ul:first-child {
    background-color: transparent; /* limits the scope of the previous rule */
}

Al limitar el alcance, use el valor predeterminado para cada atributo CSS que esté configurando.

Esta solución CSS2 ("cualquiera uldespués de otra ul") también funciona y es compatible con más navegadores.

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

A diferencia de :noty :nth-sibling, el selector de hermanos adyacentes es compatible con IE7 +.

Si tiene JavaScript cambia estas propiedades después de que se carga la página, debe mirar algunos errores conocidos en las implementaciones de IE7 e IE8 de esto. Ver este enlace .

Para cualquier página web estática, esto debería funcionar perfectamente.

Como IE6-8:not no lo acepta , te sugiero esto:

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

Así que eliges cada ulelemento principal excepto el primero .

Para obtener más ejemplos, consulte el artículo "Útil: recetas del enésimo niño" de Chris Coyer .nth-child

div li~li {
    color: red;
}

Soporta IE7

not(:first-child)Parece que ya no funciona. Al menos con las versiones más recientes de Chrome y Firefox.

En cambio, intente esto:

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

Puedes usar cualquier selector con 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)){}

No tuve suerte con algunos de los anteriores,

Este fue el único que realmente funcionó para mí

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

Esto funcionó para mí cuando intentaba que el primer botón que se muestra en la página no se vea afectado por una opción de margen izquierdo.

esta fue la opción que probé primero pero no funcionó

ul:not(:first-child)

Puede usar su selector con el siguiente :notejemplo, puede usar cualquier selector dentro del:not()

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

puede usar también :notsin selector principal.

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

Más ejemplos

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 lo usé ul:not(:first-child)es una solución perfecta.

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

¿Por qué es esto perfecto porque al usarlo ul:not(:first-child)podemos aplicar CSS en elementos internos? Me gusta li, img, span, aetiquetas, etc.

Pero cuando se usan otras soluciones:

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

y

div li~li {
    color: red;
}

y

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

y

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

Estos restringen solo CSS de nivel ul. Supongamos que no podemos aplicar CSS licomo 'div ul + ul li'.

Para elementos de nivel interno, la primera solución funciona perfectamente.

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

y así ...