no: selector de primer hijo


811

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"?

Respuestas:


1415

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.


¿Sabes exactamente en qué versiones no es compatible?
Simon_Weaver

99
@Simon_Weaver: en la práctica, todo menos IE <9 lo admite. Un gran recurso para obtener este tipo de información es caniuse.com .
Jon

2
Mmm ... ten cuidado con las restricciones de la primera solución: caniuse.com/#feat=css-not-sel-list La segunda me pareció más razonable. ¡Gracias!
iorrah

@iorrah su enlace de caniuse es para una lista de selectores, y sí, el soporte es muy limitado aún. El OP no está usando una lista de selectores. Así que creo que https://caniuse.com/#feat=css-sel3 es más apropiado con un gran soporte más allá de los días de IE8.
secretwep

Esto funciona incluso sin el elemento div al principio en Chrome.
Achraf JEDAY

158

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.


44
@Leven: ese enlace peculiar dice que debería funcionar en IE7, pero solo estáticamente. Si su JS coloca otro elemento delante de él, es posible que no se actualice correctamente. ¿Es ese el problema que viste?
Alex Quinn

Vale la pena señalar que en una secuencia de elementos como: ul ul div ul(donde estos elementos son hermanos), solo se seleccionará el segundo ul, ya que el último no tiene un ulanterior a sí mismo
Brian H.

79

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


¿Quién todavía usa IE6-8 en 2019?
oldboy

15
Teniendo en cuenta que la respuesta fue de 2013?
aasukisuki


14

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

66
Ambos trabajan, pero tienen un significado diferente. ul:not(:first-child)significa literalmente "cualquier ulelemento que no sea el primer hijo de su padre", por lo que no coincidirá incluso con el primero ulsi está precedido por otro elemento ( pencabezado, etc.). Por el contrario, ul:not(:first-of-type)significa "cualquier ulelemento excepto el primero ulen el contenedor". Tiene razón en que OP probablemente necesitó el último comportamiento, pero su explicación es bastante engañosa.
Ilya Streltsyn

9

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

4

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)


4

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*/
}

0

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í ...

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.