Cómo no seleccionar el primer niño en CSS

Cómo no seleccionar el primer niño en CSS
En aplicaciones web, los selectores se utilizan para diseñar elementos HTML específicos a través de CSS. Por ejemplo, cuando tiene mucho contenido en su página, y es necesario seleccionar algunos elementos, entonces debe optar por CSS Selectors. En CSS, una variedad de selectores lo ayudará a seleccionar el elemento específico del grupo de elementos.

En este artículo, cubriremos cómo no seleccionar el primer niño en CSS.

Cómo no seleccionar el primer niño en CSS?

En CSS, para no seleccionar el primer niño, puede usar los selectores dados:

  • : no (: primer hijo)
  • : no (: en día de tipo (1))
  • : no (: primero de tipo)

Entonces empecemos!

Método 1: Use: no (: First-Child) para no seleccionar First Child

El ": no (: primer hijo)"El selector define la regla que no selecciona el primer hijo de la etiqueta principal. Este selector nos ayudará a excluir el estilo CSS aplicado para el primer elemento.

Tomemos un ejemplo simple y aprendamos cómo podemos aplicar el selector para no seleccionar el primer niño.

Ejemplo

Aquí hay tres textos de anclaje en nuestra página que tienen un color verde. Excluyamos el color verde solo para el primer elemento de texto:

Hemos especificado la etiqueta de anclaje "" en el "<cuerpo> "De su archivo HTML:

Mi primer enlace

Mi segundo enlace

Mi tercer enlace

A continuación, utilice la etiqueta principal que es "cuerpo"Y la etiqueta infantil que es"a" junto con ":no (: primer hijo))"Selector dentro de la hoja de estilo. Luego, agregue el CSS "color"Propiedad con el valor"verde"; El color se aplicará en todos los elementos excepto el primer niño:

Ahora, guarde el código agregado y ábralo en el navegador simplemente o usando el servidor en vivo:

Como puede ver, solo hemos aplicado el color a todos los elementos, excepto el primero:

Método 2: Uso: no (: en día de tipo (1)) para no seleccionar First Child

El "no (: nth-of-type ())"Selector le permite elegir uno o más de un elemento en la secuencia. Si solo se usa (: en día de tipo (1)), el selector seleccionará al primer niño; Sin embargo, cuándo: no se coloca antes, el primer niño será excluido.

Claro: no (: nth-de-type (1)) concepto utilizando el siguiente ejemplo.

Ejemplo

Aquí, estableceremos el "no (: enésimo de tipo (1))"Selector, donde"1"Representa que el primer niño será excluido. A continuación, asigne el "color"Propiedad un valor de"naranja":

Producción

Método 3: Uso: no (: primero de tipo) para no seleccionar First Child

El selector (: primero de tipo de tipo) coincidirá con la primera aparición de un elemento y: no se agrega detrás de él como ": no (: primero de tipo)"Para omitir la primera ocurrencia.

Ejemplo

En este ejemplo, el ": no (: primero de tipo)Se aplicará el selector para excluir al primer hijo de su padre. Luego, establezca el valor "azul" Para el "color" propiedad:

Le hemos proporcionado consejos sobre cómo no seleccionar el primer niño con éxito.

Conclusión

Para no seleccionar el primer niño, use ": no (: primer hijo)",":no (: enésimo de tipo (1))" o ":no (: primero de tipo)"Selectores. Sin usar: no, estos selectores solo seleccionarán el primer niño y omitirán otros. Sin embargo, cuándo: no se coloca antes de estos selectores, estará obligado a omitir solo al primer hijo de su padre. En este artículo, hemos cubierto tres métodos eficientes para no seleccionar el primer niño en CSS.