Los selectores en CSS son las reglas que tienen el patrón de elementos. Sobre la base de estos patrones, los elementos son seleccionados por el navegador y ajustados en estilos. En algunos casos, es necesario diseñar los elementos que tienen un elemento principal específico. Por ejemplo, si hay múltiples "" elementos asignados con la misma clase y se requiere peinar el "div" que tiene el "

" etiqueta. En tales casos, el ":tiene()Se utiliza la pseudo-clase selectora de padres.

Esta publicación describirá:

• Cómo diseñar un elemento principal especificando sus elementos infantiles?
• Cómo seleccionar todos los elementos infantiles?
• Cómo seleccionar todos los elementos directos para niños?

Cómo diseñar un elemento principal especificando sus elementos infantiles?

Primero, cree un archivo HTML que tenga dos elementos "div" de la siguiente manera:

• Agregar dos ""Elementos con la misma clase"Padre-Div".
• El primero contiene dos "

  "Elementos.

• El segundo elemento "" contiene "

  " y "

  ":

Hola

mundo

Hola

Tengo la etiqueta "H1"

Si se requiere diseñar el elemento "" que tiene el "

"Elemento, entonces podemos ajustar el estilo del elemento principal sosteniendo al niño. Para este propósito, podemos utilizar el ":tiene()"Selector.

Desde ambos elementos "", seleccione el que contiene el "

"Elemento usando".Nombre de clase: HA (Nombre del niño)":

.Padre-Div: ha (H1)
Color de fondo: #103e6d;
Color: conhells;
Ancho: 150px;
Altura: 150px;
Radio fronterizo: 50%;
Text-Align: Center;

Aquí, hemos aplicado las siguientes propiedades CSS en el elemento principal:

• "color de fondo"Se usa para especificar el color de fondo del elemento.
• "color"Especifica el color del texto del elemento.
• "ancho"Se usa para definir el ancho del elemento.
• "altura"Especifica la altura del elemento.
• "radio fronterizoLa propiedad se utiliza para establecer las esquinas redondeadas del elemento.
• "texto alineado"Especifica la alineación del texto.

Producción

Cómo seleccionar todos los elementos infantiles?

Para seleccionar el elemento infantil con la ayuda del selector de padres, revise el ejemplo dado.

Ejemplo

Implemente los siguientes pasos para crear una página HTML:

• Agregue un elemento div que contiene dos "

  "Etiquetas y un""Etiqueta que tiene la clase"infantil".

• El niño "div"El elemento contiene un"

  " elemento:

Hola

mundo

Soy niño div Div

Podemos seleccionar elementos infantiles a través del padre "" clase. Esto no solo seleccionará su directo "pag"Elementos pero también selecciona el anidado"pag"Elementos:

.Padre-Div P
Color de fondo: #7f167f;
Font-Family: cursiva;
tamaño de fuente: 25px;
Text-Align: Center;
Color: Whitesmoke;

Producción

Cómo seleccionar todos los elementos directos para niños?

Para seleccionar el hijo directo del Div Parent, podemos usar el ">" símbolo. Esto ayudará a seleccionar todos los elementos "P" que son el hijo directo de los padres "". Por ejemplo, hemos aplicado las siguientes propiedades de CSS:

.Padre-Div> P
Color de fondo: #7f167f;
Font-Family: cursiva;
tamaño de fuente: 30px;
Text-Align: Center;
Color: Whitesmoke;

El "Familia tipográfica"Especifica la fuente del elemento seleccionado y"tamaño de fuente"Se usa para definir el tamaño de la fuente:

Producción

Hemos discutido sobre los selectores de padres CSS en HTML y CSS.

Conclusión

En CSS, el ":tiene()"El selector se utiliza como una pseudo-clase selectora de padres. Se usa particularmente para seleccionar elementos principales. Por ejemplo, ".Padre-Div: tiene (H1)"Selecciona el elemento principal que tiene el"

"Elementos. Para seleccionar el elemento infantil del elemento principal, utilice ".Padre-Div P". La declaración de condición también se puede usar para seleccionar todos los elementos infantiles directos. Este artículo ha explicado el selector de padres CSS con ejemplos.