html - attribute - ¿Cómo puedo usar un selector no: primer hijo?

title html

Question

Tengo una etiqueta div contiene varias etiquetas ul .

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

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

Cuando quiero establecer las propiedades CSS para cada etiqueta ul excepto la primera, intenté 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"?

Answer 1

Bueno ya que :not 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 "Útil: Recetas de nth-child" de Chris Coyer para ver más ejemplos de nth-child .

Answer 2

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

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

A diferencia de :not y :nth-sibling , IE7 + admite el selector de hermanos adyacente .

Si tiene JavaScript cambia estas propiedades después de que se cargue la página, debería observar algunos errores conocidos en las implementaciones de IE7 e IE8 de esto. Vea este enlace .

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

Answer 3

No tuve suerte con algunos de los anteriores,

Este fue el único que realmente trabajó para mí.

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

Esto me funcionó cuando intenté 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)

Answer 4

Una de las versiones que publicaste funciona para todos los navegadores modernos (donde se supported selectores de CSS de nivel 3 ):

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

Si necesita admitir navegadores heredados, o si está limitado por la limitation :not selector (solo acepta un selector simple como argumento), puede utilizar otra técnica:

Defina una regla que tenga un alcance mayor al que pretendía 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 de CSS que esté configurando.

Answer 5

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

En su lugar, intente esto:

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

Answer 6

div li~li {
    color: red;
}

Soporta IE7