CSS se aplica a todos los niños

Podemos seleccionar todos los hijos de un padre en particular y luego aplicar el estilo a todos los niños en CSS. Tenemos un selector de niños en CSS a Selecet y aplicamos estilo a todos los niños. El selector de niños también se conoce como el selector de "elemento> elemento". Cualquier elemento que esté presente dentro de la clase principal se selecciona como hijo de ese padre. Podemos cambiar el estilo de todos los niños utilizando las propiedades CSS.

En esta guía, aprenderemos cómo aplicar el estilo a todos los niños en CSS y usar algunos ejemplos para comprender este concepto en detalle.

Sintaxis:

elemento> elemento

Seleccionará a todos los hijos del padre en particular.

div. clase> *
// Propiedades de CSS

Seleccionará a los niños recursivamente.

Ejemplo #1: Seleccionar a todos los niños

Primero, creamos el archivo HTML. Luego, creamos algunas clases de "div" y "span" y escribimos algunos párrafos dentro de estas clases. Usamos el selector de niños en CSS y agregamos algo de estilo para que seleccione y aplique ese estilo a todos los niños. En esta guía, utilizamos el código Visual Studio para la demostración de estos ejemplos. Creamos este archivo HTML en este software y escribimos el código HTML. Tienes que escribir el siguiente código. El ".La extensión del archivo HTML ”se usa para guardar este archivo.

Aquí tenemos una etiqueta "". En esta etiqueta "", tenemos dos párrafos usando el "

". Entonces, viene una etiqueta "". Tenemos un párrafo dentro de esta etiqueta. Después de la etiqueta de cierre de "", también tenemos otros dos párrafos donde cerramos la etiqueta "". Fuera de esta etiqueta "div", escribimos un párrafo más. Estos párrafos lo ayudarán a comprender el concepto de seleccionar y aplicar todos los elementos en CSS.

Código CSS:

El código CSS se refleja en la siguiente imagen. Vinculamos este archivo CSS con nuestro archivo HTML. Todo el estilo que hicimos aquí se aplica al archivo HTML que creamos.

Aquí, usamos el "Div> P" que selecciona todos los párrafos que están presentes dentro del "Div". En los aparatos ortopédicos rizados, utilizamos las propiedades de estilo como el "color de fondo" que se utiliza para cambiar el color de fondo de todos los niños de ese padre "div". Lo establecemos como "azul claro". Este fondo azul claro se aplicará a todos los niños. Cambiamos la "familia de fuentes" de todos los niños usando la propiedad CSS y la establecemos en "Argelino". Esta propiedad se aplicará a todos los niños. Además, utilizamos la propiedad CSS "Alinear" de texto "y alineamos el texto de los niños con el" Centro ".

Producción:

Puede obtener fácilmente la salida presionando "Alt+B". Rendera tu salida en el navegador. Puede ver fácilmente la diferencia de cómo selecciona a todos los niños y aplica el estilo a esos niños.

Aquí, vemos que selecciona los dos primeros párrafos, así como el cuarto y quinto párrafos y aplica el estilo a esos párrafos. No cambia el estilo del tercer y sexto párrafos, ya que no son los hijos del padre "Div". El tercer párrafo está escrito en el "tramo", por eso no es el hijo de "div". El sexto párrafo está escrito fuera del "div", por lo que el estilo no se aplica a este párrafo. El selector de niños solo selecciona al niño del padre que se menciona en el código CSS.

Ejemplo #2: Seleccionar a todos los niños de manera recursiva

Para este ejemplo, si el código HTML es el mismo que el código anterior, establecemos el nombre de la clase DIV como "AllChild" y usamos este nombre en el código CSS. Cambiamos el código CSS y seleccionamos al hijo del padre, recursivamente.

En este ejemplo, cambiamos el color de "fondo" de los hijos del elemento de clase Div. Aquí, el "Div.AllChilld> *"selecciona todos los elementos de la clase Div como hijo de ese" div ". El "*" selecciona a todos los hijos de la clase "Div" llamada "AllChild". Cambia el color de todos los niños en la clase Div a "rosa"

Producción:

Aquí está la salida donde usamos el "div.AllChild> *"Selector. Selecciona a todos los hijos de los padres, recursivamente. Puede ver que cambia el color de fondo de todos los elementos de la clase Div a un color "rosa".

Ejemplo #3: Seleccionar a todos los niños en CSS

En este código, usamos el "" y . En el "", tenemos tres "" y el párrafo "

"Dentro de este párrafo. Usamos el "" nuevamente y luego cerramos este párrafo usando "

". Cerramos el "div" y creamos otro lapso que está presente fuera del "div".

Código CSS:

La "pantalla" del "Span" está configurado en "Bloquear". Usamos el selector de niños que selecciona a todos los hijos de los padres. Se usa aquí para seleccionar todos los tramos de la clase Div, ya que "Span" es el hijo del padre "Div". Selecciona todos los elementos del SPAN del DIV y luego aplica el estilo a todos los tramos. El color de fondo de todos los tramos está establecido en "verde claro". El "tamaño de fuente" de todos los "tramos" se establece en "35px". La "Fontamilia de la fuente" para todo esto es "Gill Sans". El "Font-Weight" está configurado en "Bold" y el "estilo" está configurado en "Cursal". Esto se aplica a todos los niños.

Producción:

Aplica el estilo a todos los niños "lapios" de los padres "Div". Como el párrafo 1, 2 y 4 se escribe dentro del "tramo" en el "div", el estilo de estos tres párrafos cambia. Significa que el selector de niños selecciona el lapso del DIV y aplica el estilo anterior a todos estos niños.

Ejemplo #4: Seleccionar a todos los niños de manera recursiva

Creamos la "clase div" con el nombre de "niño". Tenemos dos tramos, y luego un párrafo, y nuevamente un tramo dentro del div. Un párrafo está escrito fuera del div. Ahora, seleccionamos los elementos de la clase DIV recursivamente utilizando el selector CSS.

Código CSS:

El span "Display" es "Bloque". Entonces, tenemos el "Div.Selector de niños> *"que selecciona todos los elementos de la clase DIV llamada" Niño "usando el" *". El "*" selecciona todos los elementos infantiles. El "color de fondo" aquí para todos los niños es "Salmón ligero". El color de fuente es "azul-violeta". La familia de la fuente que usamos aquí es "Times New Roman". También usamos el "Font-Weight" y lo establecemos en "más audaz". El "tamaño de fuente" que usamos es "25px". Ahora, verifique cómo se ve la salida.

Los primeros cuatro párrafos se escriben dentro de la clase Div "Niño" y todo el estilo que utilizamos en el ejemplo anterior del código CSS se aplica aquí, como se muestra en la imagen. Selecciona todos los elementos infantiles de la clase "Div" de "Div" y aplica los estilos a esos elementos.

Conclusión

Utilizamos el selector de niños en esta guía y explicamos cómo seleccionar a todos los niños en CSS. También explicamos cómo aplicar los estilos a todos los hijos del padre seleccionado. Aprendimos a seleccionar a todos los hijos de un padre seleccionado y seleccionar todos los niños utilizando recursivamente el selector de niños CSS. En esta guía, exploramos cuatro ejemplos diferentes. Realizamos todos los ejemplos y mostramos estos códigos y salidas en esta guía. Esperamos que aprenda este concepto después de leer cuidadosamente esta guía y después de realizar estos ejemplos por su cuenta.