¿Cómo puedo utilizar un selector not:first-child?

Tengo divuna etiqueta que contiene varias uletiquetas.

Si intento establecer propiedades CSS solo para la primera uletiqueta y este código funciona:

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

Cuando quiero establecer propiedades CSS para cada uletiqueta 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 ningún efecto. ¿Cómo debo escribir en CSS: "cada elemento, excepto el primero"?

Sep 06 '12 04:09 Oto Shavadze

Una de las versiones que publicó en realidad 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 la limitación:not del selector (solo acepta un selector simple como argumento), puede usar otra técnica:

Defina una regla que tenga un alcance mayor al que pretende y luego "revocarla" condicionalmente, limitando su alcance a lo que sí 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, utilice el valor predeterminado para cada atributo CSS que esté configurando.

Sep 05 '2012 21:09 Jon

Esta solución CSS2 ("cualquiera ultras 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 JavaScript cambia estas propiedades después de que se carga la página, debe observar algunos errores conocidos en las implementaciones de IE7 e IE8 . Vea este enlace .

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

Mar 19 '2013 21:03 Alex Quinn

Dado que IE6-8:not no lo acepta , le sugeriría esto:

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

Entonces eliges cada uno ulen su elemento padre excepto el primero .

Consulte el artículo "Recetas útiles: nth-child" de Chris Coyer para obtener más nth-child ejemplos .

Feb 22 '2013 21:02 ed1nh0

Puede utilizar la pseudoclase "primer hijo" dentro de la pseudoclase "not()".

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

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Expandir fragmento

Formas alternativas,

Con "nth-child()", seleccionará el enésimo número de hijos.

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

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Expandir fragmento

Con "nth-of-type()", seleccionará el enésimo número de elemento de su padre.

div ul:not(:nth-of-type(1)){
    background-color: #900;
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Expandir fragmento

Con "nth-last-child()", seleccionará el enésimo número de niños contando desde el último niño. Si tienes 4 etiquetas "ul", puedes escribir así.

div ul:not(:nth-last-child(4)){
    background-color: #900;
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Expandir fragmento

Con "nth-last-of-type()", seleccionará el enésimo número de elemento de su padre contando desde el último hijo. Si tienes 4 etiquetas "ul", puedes escribir así.

div ul:not(:nth-last-of-type(4)){
    background-color: #900;
}

<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo Classes</title>
</head>
<body>
  <div>
    <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">Products</a></li>
    </ul>
    <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
    <ul>
       <li><a href="#">Services</a></li>
       <li><a href="#">Downloads</a></li>
    </ul>
    <ul>
       <li><a href="#">Facebook</a></li>
       <li><a href="#">Instagram</a></li>
    </ul>
  </div>
</body>
</html>

Expandir fragmento

Estas son algunas de las mejores formas de manejar este tipo de situaciones.

Apr 28 '2021 21:04 wahsandaruwan