'. Dans de tels cas, le « :a() ” la pseudo-classe du sélecteur parent est utilisée.
Ce billet décrira :
- Comment styliser un élément parent en spécifiant ses éléments enfants ?
- Comment sélectionner tous les éléments enfants ?
- Comment sélectionner tous les éléments enfants directs ?
Comment styliser un élément parent en spécifiant ses éléments enfants ?
Tout d'abord, créez un fichier HTML contenant deux éléments 'div' comme suit :
- Ajouter deux ' « éléments de même classe » parent-div ”.
- Le premier contient deux ' ' éléments.
- Le deuxième élément '
' contient ' ' et ' ” : < div classer = 'div-parent' >
< p > Bonjour < / p >
< p > monde < / p >
< / div >
< div classer = 'div-parent' >
< h1 > Salut < / h1 >
< p > j'ai la balise 'h1' < / p >
< / div >S'il est nécessaire de styliser l'élément '
' ayant le ' ', alors nous pouvons ajuster le style de l'élément parent en tenant l'enfant. A cet effet, nous pouvons utiliser le « :a() ” sélecteur.
Parmi les deux éléments '
', sélectionnez celui qui contient l'élément '' en utilisant ' .class-name:has(child-name) ” :
.parent-div : a ( h1 ) {
Couleur de l'arrière plan : #103e6d ;
Couleur : coquillage ;
largeur : 150px ;
la taille : 150px ;
rayon de bordure : cinquante% ;
aligner le texte : centre ;
}Ici, nous avons appliqué les propriétés CSS suivantes sur l'élément parent :
- ' Couleur de l'arrière plan ” est utilisé pour spécifier la couleur de fond de l'élément.
- ' Couleur ” spécifie la couleur du texte de l'élément.
- ' largeur ” est utilisé pour définir la largeur de l'élément.
- ' la taille ” spécifie la hauteur de l'élément.
- ' rayon de bordure ” La propriété est utilisée pour définir les coins arrondis de l'élément.
- ' aligner le texte ” spécifie l'alignement du texte.
Sortir
Comment sélectionner tous les éléments enfants ?
Pour sélectionner l'élément enfant à l'aide du sélecteur parent, parcourez l'exemple donné.
Exemple
Mettez en œuvre les étapes suivantes pour créer une page HTML :
- Ajoutez un élément div qui contient deux ' ' balises et un ' « tag ayant la classe » enfant-div ”.
- L'enfant ' div ” contient un élément “
< div classer = 'div-parent' >” :
< p > Bonjour < / p >
< p > monde < / p >
< div classer = 'enfant-div' >
< p > je suis enfant div < / p >
< / div >
< / div >Nous pouvons sélectionner des éléments enfants via le parent '
' classer. Cela ne sélectionnera pas seulement son direct ' p ” mais sélectionne également les éléments “ imbriqués p ' éléments: .parent-div p {
Couleur de l'arrière plan : #7F167F ;
famille de polices : cursive ;
taille de police : 25px ;
aligner le texte : centre ;
Couleur : fumée blanche ;
}Sortir
Comment sélectionner tous les éléments enfants directs ?
Pour sélectionner l'enfant direct de la div parent, nous pouvons utiliser le ' > ' symbole. Cela aidera à sélectionner tous les éléments 'p' qui sont l'enfant direct du parent '
”. Par exemple, nous avons appliqué les propriétés CSS suivantes : .parent-div > p {
Couleur de l'arrière plan : #7F167F ;
famille de polices : cursive ;
taille de police : 30px ;
aligner le texte : centre ;
Couleur : fumée blanche ;
}Les ' famille de polices ” spécifie la police de l'élément sélectionné et “ taille de police ” sert à définir la taille de la police :
Sortir
Nous avons discuté des sélecteurs parent CSS en HTML et CSS.
Conclusion
En CSS, le ' :a() ” est utilisé comme pseudo-classe de sélecteur parent. Il est notamment utilisé pour sélectionner des éléments parents. Par exemple, ' .parent-div:a(h1) ' sélectionne l'élément parent ayant le ' ' éléments. Pour sélectionner l'élément enfant de l'élément parent, utilisez ' .parent-div p ”. L'instruction de condition peut également être utilisée pour sélectionner tous les éléments enfants directs. Cet article a expliqué le sélecteur parent CSS avec des exemples.
- L'enfant ' div ” contient un élément “