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

Question

Tengo div etiqueta que contiene varias etiquetas ul.

Si yo tratando propiedades CSS fijadas solo por primera ul etiqueta, y este código funciona:

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

cuando quiero establecer las propiedades CSS para cada etiqueta ul excepto el primero, he intentado 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 a ningún efecto. ¿Cómo debo escribir en CSS: "cada elemento, excepto el primero"?

Answer 1

Una de las versiones que registró actually works para todos los navegadores modernos (donde CSS selectors level 3 son supported):

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

Si tiene que soportar navegadores antiguos, o si se ven obstaculizados por la :not selector de limitation (sólo acepta un simple selector como argumento) luego puede usar otra técnica:

Defina una regla que tenga un alcance mayor 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 del uso default value para cada atributo CSS que está configurando.

Answer 2

Bueno ya :not no es aceptada por IE6 ~ 8, me gustaría sugerir esto:

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

Así que recoger todos los ul en su elemento padre excepto el primero.

hacen referencia al artículo "Useful :nth-child Recipes" de Chris Coyer para más nth-childexamples.

Answer 3

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

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

diferencia de :not y :nth-sibling, el adjacent sibling selector está soportado por IE7 +.

Si tiene JavaScript cambia estas propiedades después de la página se carga, usted debe buscar en algunos errores conocidos en la IE7 y IE8 implementaciones de este. See this link.

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

Answer 4

div li~li { 
    color: red; 
} 

Soporta IE7

Answer 5

not(:first-child) 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) {}