Pregunta ¿Cómo puedo usar un selector de no: primer hijo?


yo tengo div etiqueta que contiene varios ul etiquetas.

Si intento establecer las propiedades de CSS solo para la primera ul etiqueta, y este código funciona:

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

Cuando quiero configurar propiedades de CSS para cada ul etiqueta excepto la primera, probé esto:

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

también esto:

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

y esto:

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

Pero sin efecto. ¿Cómo debo escribir en CSS: "cada elemento, excepto el primero"?


579
2017-09-05 21:09


origen


Respuestas:


Una de las versiones que publicaste en realidad funciona para todos los navegadores modernos (donde Selectores de CSS nivel 3 son soportado)

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

Si necesita admitir navegadores heredados, o si está impedido por el :not selector limitación (solo acepta una selector simple como argumento) entonces puedes usar otra técnica:

Defina una regla que tenga un alcance mayor de lo que pretende y luego "revoque" de forma condicional, 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 por defecto para cada atributo CSS que está configurando.


982
2017-09-05 21:11



Esta solución CSS2 ("cualquier ul después de otro ul") también funciona y es compatible con más navegadores.

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

diferente a :not y :nth-sibling, el selector de hermanos adyacentes es compatible con IE7 +.

Si usted tiene JavaScript cambia estas propiedades después de cargar la página, debe ver algunos errores conocidos en el IE7 y IE8 implementaciones de esto. Ver este enlace.

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


131
2018-03-19 21:33



Bien desde :not no es aceptado por IE6 ~ 8, Te sugiero esto:

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

Así que escoges cada ul en su elemento padre excepto el primero.

Consulte el artículo de Chris Coyer "Útil: recetas nth-child" artículo para más nth-child  ejemplos.


56
2018-02-22 21:07



div li~li {
    color: red;
}

Admite IE7


14
2017-10-16 11:10



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) {}

3
2017-08-19 16:36