Una hoja de estilo en cascada es un código que afecta los elementos del código HTML. El efecto combinado forma las páginas web y los sitios web. Cualquier lenguaje de programación que se utilice en el back-end preferiblemente HTML y CSS para desarrollar y diseñar un front-end para el sitio web. Estos dos son responsables de las páginas web estáticas. HTML y CSS junto con JavaScript juegan principalmente un papel en la creación de un sitio web dinámico. En este artículo, HTML y CSS se utilizarán para ver la página web creada.

A veces, nos encontramos con una situación en la que queremos evitar algunos elementos o contenidos entre el grupo de los mismos elementos. Para especificarlos cuesta manualmente tiempo. Entonces, para evitar el consumo de tiempo, CSS se refiere a propiedades tan efectivas y eficientes para hacer uso de ellas en el código que es fácilmente comprensible y hace que el código sea manejable. Esto se hace por la propiedad de CSS "no es la primera".

No: propiedad de primer hijo

Esta propiedad CSS se usa para seleccionar todos los contenidos HTML del mismo tipo que no sea el primero. Esta propiedad es opuesta a la propiedad CSS de "CSS First of Type", que es responsable de afectar solo el primero de la mayoría del contenido HTML del mismo tipo. Además de agregar un estilo a todas las etiquetas de los CSS en línea evitando el primero, esta no: la propiedad de primer hijo eliminó la ambigüedad que se crea al tener el desastre de CSS en línea que hace que el código sea difícil de entender y complicado. Solo agregamos una pequeña pieza de código en el CSS interno o externo especificando el contenido HTML donde queremos aplicar esta propiedad. Entonces el primer niño se ve afectado automáticamente.

Sintaxis:
La sintaxis para la propiedad Not: First-Child es la siguiente:

Content_name: no (: first-child)
El valor de la propiedad; \\ cualquier efecto que queramos aplicar en los elementos HTML que no sean los primeros.

Ejemplo 1: No: Primer hijo del párrafo

Para elaborar el concepto de no tener un primer hijo, usamos el

párrafos del contenido HTML para aplicar esta propiedad. Los párrafos son los contenidos HTML que se dice que son un montón de líneas de texto. Estas líneas están secuenciadas y alineadas de tal manera que forman un párrafo. El código contiene la etiqueta del cuerpo. Usamos los dos encabezados simples y los tres párrafos que contienen el texto simple de algunas palabras con ellos. Usamos un texto de muestra de lorem ipsum.

Solo necesitamos ver los resultados de la propiedad. Para hacerlo bastante simple, solo se declara este contenido. Entonces, cierre las etiquetas del cuerpo.

La sección de la cabeza solo contiene la etiqueta de estilo para convertirlo en un CSS interno.

Use la etiqueta del párrafo

con la propiedad no: de primer hijo para aplicar todos los efectos en todos los párrafos excepto el primero. Agregamos el color de fuente roja a los párrafos. Cierre todas las etiquetas abiertas.

Guarde el código con la extensión HTML al editor de texto. Esta extensión hace el icono del archivo como el navegador predeterminado. Este icono asegura que el archivo es una página web.

Ejemplo 2: No: First-Child en la lista

Las listas HTML son una forma importante de representar el texto. Para implementar la propiedad CSS del selector de primer hijo, utilizamos las dos listas. Para dar más detalles, primero necesitamos tener el conocimiento de las listas HTML. Se crean dos tipos de listas a través del idioma HTML: una lista desordenada

y una lista ordenada
. La forma de declarar es la misma para ambos. Adentro
y
, Todos los artículos están escritos con
1. etiquetas.
   
   
   • elemento1
   
   
   • elemento2
   
   

   Ahora, volviendo al ejemplo, utilizamos dos listas desordenadas. Ambas listas se declaran dentro del div. Primero, considere la sección del cuerpo HTML del código. Dos encabezados simples,

   y

   , son declarados. Entonces, la etiqueta DIV se usa para declarar un contenedor Div. Dentro del div, el primero

   Se declara la lista. Se agrega un CSS en línea para la propiedad de margen. Esta propiedad de margen también se aplica en el segundo div.

   Una propiedad de margen es el valor CSS de la distancia del objeto desde el borde de la pantalla de fondo. Por ejemplo, el margen de la lista aquí se declara para crear la lista a una distancia específica.

   Ambas listas se declaran de manera similar que tiene tres elementos de lista. Ahora, cierre todas las etiquetas y diríjase hacia el CSS interno. El encabezado es aplicado por la propiedad del color de fuente. Luego, la parte principal del código no: se aplica la propiedad de primer hijo.

   Esta propiedad se aplica en el

   etiqueta, ya que ambas listas están desordenadas. Pero asegúrese de que estas listas estén de forma independiente o estén presentes dentro de cualquier otro contenedor. Como sabemos que declaramos ambas listas dentro del Div, debemos mencionar el DIV con el
   etiqueta para que la propiedad se aplique en todas las listas dentro del div, excepto la primera.
   Div ul: no (: primer hijo)
   Color de fondo: morado;
   Color blanco;
   Font-Weight: Bold;
   Ancho: 40%;
   

   El div y

   se aplican con las características de tener un color de fondo y el color de fuente. El peso de la fuente está configurado en negrita. El ancho de la lista también se declara.

   Cierre todas las etiquetas. Guarde el archivo e impleméntelo en el navegador para ver los resultados.

   Verá que la primera lista aparece de forma predeterminada sin ningún cambio aplicado a ella. Mientras que la segunda lista se ve afectada por todos los valores y propiedades que aplicamos a la etiqueta de la lista desordenada en la sección principal.

   Del mismo modo, si aplicamos alguna propiedad a todos los

   Etiquetas como lo hicimos antes pero sin usar la propiedad de primer hijo para las listas, qué sucederá?
   Div ul
   Estilo de fuente: cursiva;
   

   Establecemos el estilo de fuente en cursiva en todo el UL del div. Pero los valores que se escriben dentro de la propiedad del selector infantil no primero se aplican en todas las listas, excepto la primera.

   Aplicar ambos estilos en el mismo código de cuerpo. Guárdelo e impleméntelo. Vemos que el estilo cursiva se aplica en todos los elementos de la lista porque no mencionamos la propiedad de primer hijo con ellos. Mientras que los valores que tienen el selector se aplican solo en la segunda lista.

   Conclusión

   El CSS no: First-Child nos da conocimiento sobre el uso de propiedades CSS en todos los elementos de HTML en lugar del primero. La condición para implementar este fenómeno es que todos los contenidos HTML deben ser del mismo tipo; de lo contrario, este efecto no se aplicará. Desde el principio, hablamos sobre el uso básico de HTML y CSS. Luego, el CSS no: First-Child se explica al dar una sintaxis que se sigue aplicando esta propiedad. Luego, implementamos este concepto en dos contenidos HTML diferentes: uno es el párrafo y el otro es el contenedor Div.