Clases anidadas de CSS

CSS es un lenguaje que se agrega a otro lenguaje de diseño front-end, HTML para crear un sitio web o una página web. Para la declaración interna y externa de CSS, necesitamos declarar ID o clases con las características que queremos aplicar a los contenidos HTML.

Clase CSS:

En CSS o en cualquier otro lenguaje de programación, las clases juegan un papel importante cuando hablamos sobre la especificación de cualquier elemento. En CSS, las clases se crean para declarar un par de estilos y efectos en los elementos HTML. Todas las propiedades de CSS se escriben dentro del cuerpo de la clase asignando valores a las propiedades. Por ejemplo:

.nombre de la clase
Property_name: valor;

Una clase se declara con un punto y el nombre de la clase. Estas clases son accedidas por el contenido HTML cuando el nombre de la clase está escrito dentro de las etiquetas particulares, como lo hicimos para uno de los contenidos HTML como el párrafo < p class= "class_name"> Este es un párrafo

Al mencionar el nombre, se aplican todas las características de una clase a ese contenido. El propósito principal de la creación de esta clase es que todas las características y estilos se permitan al contenido HTML a la vez.

Clases anidadas:

Al igual que la clase simple, las clases anidadas también se crean al diseñar las páginas web. El fenómeno anidado no es desconocido para los desarrolladores y diseñadores también porque este término se aplica a las declaraciones IF-Else, en bucles, etc. La declaración de la clase anidada CSS es de alguna manera similar a los bucles anidados. No solo la clase sino que también se ve afectadas las etiquetas HTML por el término 'clases anidadas'. Una etiqueta HTML de contenido una vez se declara con un nombre de clase. Luego, dentro de esta etiqueta, la otra etiqueta del contenido HTML 'mismo' se declara con otro nombre de clase. Al final, ambas etiquetas están cerradas colectivamente. Esto hace que la primera etiqueta sea la externa y la segunda etiqueta una etiqueta interna. Podemos usar más de una etiqueta interna a la vez. Una vez que el nombre de la clase se menciona en las etiquetas externas, todas las etiquetas internas de otros contenidos HTML no necesitarán agregar más ningún nombre de clase con ellas.

texto

texto

Esta fue la declaración del nombre de clase dentro del cuerpo HTML. Ahora, veremos cómo se declaran las clases en la sección principal. Primero, se declara la clase de la etiqueta HTML externa y luego la interior.

Esta es de alguna manera la relación de la clase padre-hijo. Porque la etiqueta HTML externa, por ejemplo, la etiqueta tiene una clase 'class1'. Se declara junto con su contenido de párrafo como:

.Clase1 p

No podemos usar la clase de párrafos directamente. Ahora, considere una etiqueta DIV interior que tiene otra clase 'clase2'. Para la clase anidada, agregaremos la clase de ambas etiquetas. El exterior y el interno Div.

.clase1 clase2 p

Esto es necesario para especificar el contenido HTML a su clase y a quien pertenece. Ahora, intentaremos algunos ejemplos para elaborar este concepto.

Ejemplo 1:

En este ejemplo, se agrega el color simple del cuerpo usando la etiqueta HTML. Entonces, se usa una etiqueta DIV que tiene una clase CSS llamada Container.

Dentro de este div, se usa una etiqueta de encabezado para agregar un encabezado simple. Se usa un párrafo para agregar una oración simple. Ambas etiquetas no van acompañadas por la clase CSS porque estas se establecerán directamente a través del nombre del contenedor Div.

Ahora dentro de la etiqueta Div, antes de cerrar este Div, agregaremos otro DIV con un nuevo nombre de clase CSS.

Este div contiene nuevamente el encabezado y los párrafos dentro de él. Cierre el div, la primera etiqueta de cierre es para el Div interno y la segunda etiqueta de cierre es para el Div exterior.

Cierre la etiqueta del cuerpo. En la etiqueta de estilo de la cabeza, primero, declararemos la clase del primer div 'contenedor'. El encabezado de la clase de contenedor se accede mediante el nombre de la clase del Div Exterior.

.contenedor H1
Tamaño de fuente: 24px;
Color: cian;

El color de fuente y el tamaño de fuente se aplican al encabezado. Del mismo modo, el párrafo también es aplicado por el CSS que tiene el mismo tamaño de fuente y propiedades de color. Cuando se trata de la descripción de la clase para el Div Inner, siempre usamos la clase Div Exterior junto con la Clase Div Interior y luego los elementos dentro del Div. Esto es para acceder al contenido HTML correctamente. No podemos acceder directamente a la clase dentro del DIV solo por su nombre, al igual que la clase matriz-hijo en herencia. Primero, escribimos el nombre de la clase principal y luego la clase infantil. De esta manera, se eliminará cualquier ambigüedad con respecto a varios padres y más de las clases de un niño.

.envase .Myclass p
Tamaño de fuente: 24;
Color: Lightgreen;

Cierre todas las etiquetas abiertas y guarde el código en el archivo del editor de texto como una extensión HTML. Esta extensión permitirá que la página web se muestre en el navegador.

En la ejecución, verá que se creará una página web negra a fondo con todos los encabezados y párrafos con la misma alineación y jerarquía que se declararon con todos los efectos de CSS. Esto se debe a que la hoja de estilo contiene la propiedad CSS de la clase en la misma secuencia que las clases definidas en las etiquetas HTML.

Ejemplo 2:

Este ejemplo trata sobre el uso de una lista en el código HTML. El mismo divs con un recipiente de clase se usa como divitiva para las clases anidadas. Se usan etiquetas de encabezado y párrafo simples para el contenido del Div Exterior. Después de eso, se declara un Div interno con la misma clase. Este div contiene html lista desordenada con ella.

Después de este div, se usa otro Div dentro del segundo div para crear clases anidadas. Este div contiene un nombre de clase diferente para identificarse correctamente.

< div class = "MyClass1" >

Dentro de este div, hemos usado un encabezado y una lista desordenada. Ahora, veamos la sección CSS. Todas las clases y propiedades se declaran de la misma manera que nosotros en el ejemplo pasado. Solo la adición es la clase de la más interior o el 3er Div.

.envase .MyClass1 H1
Tamaño de fuente: 20px;
Color blanco;

Guarde el código y ejecute el archivo.

Verá que cada div y sus elementos se aplican con los efectos que proporcionamos en las clases de CSS.

Conclusión

Las clases anidadas de CSS son un enfoque para declarar jerárquicamente clases que causan el fenómeno externo e interno de las etiquetas. Asegúrese de que las etiquetas HTML en las que debemos implementar clases anidadas de CSS sean del mismo tipo, por ejemplo, un encabezado. Si se cambia una jerarquía de la declaración de clase o se altera la secuencia, entonces será difícil aplicar las propiedades de CSS a los contenidos HTML en una clase anidada. Hemos elaborado sobre este tema utilizando dos ejemplos, uno con un solo contenido interno, mientras que el segundo ejemplo contiene dos contenidos HTML internos.