'. En tales casos, el “ :posee() Se utiliza la pseudoclase del selector padre.
Esta publicación describirá:
- ¿Cómo diseñar un elemento principal especificando sus elementos secundarios?
- ¿Cómo seleccionar todos los elementos secundarios?
- ¿Cómo seleccionar todos los elementos secundarios directos?
¿Cómo diseñar un elemento principal especificando sus elementos secundarios?
Primero, cree un archivo HTML que tenga dos elementos 'div' de la siguiente manera:
- Añadir dos ' 'elementos con la misma clase' padre-div ”.
- El primero contiene dos “ ” elementos.
- El segundo elemento “
” contiene “ ' y ' ”: < división clase = 'div padre' >
< pag > Hola < / pag >
< pag > mundo < / pag >
< / división >
< división clase = 'div padre' >
< h1 > Hola < / h1 >
< pag > Tengo la etiqueta 'h1' < / pag >
< / división >Si se requiere aplicar estilo al elemento “
” que tiene el “ ”, luego podemos ajustar el estilo del elemento principal manteniendo presionado el elemento secundario. Para este propósito, podemos utilizar el “ :posee() seleccionador.
De los dos elementos “
”, seleccione el que contiene el elemento “” usando “ .class-name:has(child-name) ”:
.parent-div : posee ( h1 ) {
color de fondo : #103e6d ;
color : concha ;
ancho : 150px ;
altura : 150px ;
borde-radio : 50% ;
texto alineado : centro ;
}Aquí, hemos aplicado las siguientes propiedades CSS en el elemento principal:
- “ color de fondo ” se utiliza para especificar el color de fondo del elemento.
- “ color ” especifica el color del texto del elemento.
- “ ancho ” se utiliza para definir el ancho del elemento.
- “ altura ” especifica la altura del elemento.
- “ borde-radio La 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 secundarios?
Para seleccionar el elemento secundario con la ayuda del selector principal, siga el ejemplo dado.
Ejemplo
Implemente los siguientes pasos para crear una página HTML:
- Agregue un elemento div que contenga dos ' etiquetas ” y un “ ” etiqueta que tiene la clase “ niño-div ”.
- El niño ' división El elemento ” contiene un elemento “
< división clase = 'div padre' >”:
< pag > Hola < / pag >
< pag > mundo < / pag >
< división clase = 'niño-div' >
< pag > soy niño div < / pag >
< / división >
< / división >Podemos seleccionar elementos secundarios a través del padre “
' clase. Esto no solo seleccionará su directo” pag ” pero también selecciona los anidados “ pag ” elementos: .parent-div pag {
color de fondo : #7F167F ;
Familia tipográfica : cursivo ;
tamaño de fuente : 25px ;
texto alineado : centro ;
color : humo blanco ;
}Producción
¿Cómo seleccionar todos los elementos secundarios directos?
Para seleccionar el hijo directo del div padre, podemos usar el ' > ' símbolo. Esto ayudará a seleccionar todos los elementos 'p' que son el hijo directo del padre '
”. Por ejemplo, hemos aplicado las siguientes propiedades CSS: .parent-div > pag {
color de fondo : #7F167F ;
Familia tipográfica : cursivo ;
tamaño de fuente : 30 píxeles ;
texto alineado : centro ;
color : humo blanco ;
}Él ' Familia tipográfica ” especifica la fuente del elemento seleccionado y “ tamaño de fuente ” se utiliza para definir el tamaño de la fuente:
Producción
Hemos discutido acerca de los selectores principales de CSS en HTML y CSS.
Conclusión
En CSS, el “ :posee() El selector se utiliza como una pseudoclase de selector padre. Se utiliza especialmente para seleccionar elementos principales. Por ejemplo, ' .parent-div: tiene (h1) ” selecciona el elemento padre que tiene el “ ” elementos. Para seleccionar el elemento secundario del elemento principal, utilice ' .parent-div p ”. La declaración de condición también se puede utilizar para seleccionar todos los elementos secundarios directos. Este artículo ha explicado el selector principal de CSS con ejemplos.
- El niño ' división El elemento ” contiene un elemento “