No seleccionar el primer hijo en CSS
-
Utilice el selector
:not(selector)para no seleccionar el primer hijo en CSS -
Diseñe el primer niño individualmente usando el selector
:first-childpara no seleccionar el primer niño en CSS
En este artículo, aprenderemos cómo utilizar los selectores CSS para no seleccionar al primer hijo.
Utilice el selector :not(selector) para no seleccionar el primer hijo en CSS
Podemos usar el selector :not(selector) para seleccionar cualquier otro elemento que no sea el elemento seleccionado. Entonces, podemos usar el selector para no seleccionar el primer hijo en CSS. Podemos usar :first-child como selector en el selector :not(selector). De esta forma, podemos aplicar estilos a todos los descendientes de un elemento excepto al primero. Aquí, en los navegadores con Selectores CSS de nivel 3, podemos usar el selector :not.
Por ejemplo, cree la etiqueta body en HTML. Luego, escriba tres etiquetas p y escriba algún contenido de su elección entre las etiquetas. En CSS, seleccione body p:not(:first-child) y establezca el color en red.
Aquí, en el fragmento de abajo, podemos ver que el cuerpo contiene párrafos, y todos ellos tienen su color de fuente establecido en rojo, excepto el primero. Por lo tanto, podemos seleccionar todos los hijos excepto el primer hijo y aplicar estilos. El selector :not, sin embargo, tiene ciertas limitaciones (como que solo puede procesar selectores simples como argumento).
Ejemplo de código:
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
body p:not(:first-child) {
color: red;
}
Diseñe el primer niño individualmente usando el selector :first-child para no seleccionar el primer niño en CSS
Podemos establecer reglas específicas que anulen la regla establecida previamente usando el selector :first-child. Con esta técnica, podemos diseñar a todos los niños excepto al primer niño. Anular los estilos usando el selector :first-child hará que el primer hijo parezca diferente de los otros hijos.
Por ejemplo, use la misma estructura HTML que en el primer método. En CSS, seleccione la etiqueta p y establezca el color en azul. A continuación, seleccione el primer hijo como body p:first-child y luego establezca el color en black.
Aquí, el estilo predeterminado para los párrafos, excepto el primero, se establece como color: blue, mientras que se reemplaza por color: black usando el selector :first-child. Por tanto, podemos utilizar el selector :first-child para no seleccionar el primer hijo.
Ejemplo de código:
p{
color:blue;
}
body p:first-child {
color: black;
}
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</body>
