Seleccione todos los elementos infantiles recursivamente en CSS

El método comúnmente utilizado para seleccionar los elementos HTML en CSS es agregar la identificación o el selector de clases del elemento particular y luego aplicar las propiedades de CSS en el elemento. Pero, si es necesario seleccionar diferentes tipos de elementos infantiles asociados con un solo elemento principal. Por ejemplo, un elemento de tramo, un elemento de párrafo o un elemento de encabezado como el hijo de un solo elemento div, el "*"Símbolo seguido del selector se usa en el elemento de estilo CSS.

Este artículo demostrará el método para seleccionar todos los elementos infantiles prácticamente.

Cómo seleccionar todos los elementos infantiles de manera recursiva?

Para seleccionar los elementos infantiles, el desarrollador debe agregar la identificación o el selector de clase del elemento principal con el "*"Símbolo al final en el elemento de estilo CSS y luego agregue las propiedades dentro de él.

Ejemplo

Agreguemos un ejemplo simple para comprender la explicación anterior:

Párrafo 1

> Párrafo # 2

Párrafo # 3

> Párrafo # 4

En el fragmento de código agregado arriba:

• • A ""El elemento se agrega con una clase declarada como"mi clase".
  • Dentro de ""Elemento, cuatro subelementos se definen usando"

    ","","

    ", y ""Etiquetas con el texto"Párrafo 1","Párrafo 2","Párrafo # 3", y "Párrafo # 4", Respectivamente.

  • Después del cierre ""Etiqueta, tres""Se agregan elementos que no están asociados con lo anterior"" elemento. Se agregan solo para diferenciar los que son los elementos infantiles asociados con el DIV de los padres y los que son elementos independientes.

Ahora, para seleccionar todos los elementos infantiles del Div, el "*Se puede usar el símbolo con el nombre de la identificación o clase de los padres:

.mi clase *
Color de fondo: PowderBlue;
bloqueo de pantalla;
Text-Align: Center;

En el fragmento de código anterior:

• • El "*"Se agrega el símbolo seguido por el".mi claseSelector Ese es el elemento principal que contiene cuatro elementos diferentes dentro de él como elementos infantiles.
  • Dentro de él, el "color de fondo"La propiedad se ha definido como"azul pálido". Esta propiedad agrega el color de fondo a los elementos infantiles.
  • "bloqueo de pantalla" y "TEXT-ALEGIO: CentroLas propiedades se han definido para alinear los elementos infantiles con el centro de la interfaz.

El ejemplo anterior se aplicará las propiedades CSS a los elementos infantiles del elemento principal asociado con la clase "mi clase". Estas propiedades no se aplicarán a otros elementos que no son los elementos infantiles del DIV asociados con la clase "MyClass":

Se trata de seleccionar todos los elementos infantiles de manera recursiva en CSS.

Conclusión

Para seleccionar todos los elementos infantiles de un elemento principal en particular, se requiere agregar el "*Símbolo después de la identificación o el selector de clase del elemento principal en el elemento de estilo CSS. Las propiedades CSS agregadas dentro se implementarán en todos los elementos infantiles. Este artículo proporcionó una guía completa del método para seleccionar todos los elementos infantiles en CSS.