Sélecteurs d'éléments enfants CSS
- Page précédente Sélecteurs de descendants CSS
- Page suivante Sélecteurs de frère adjacent CSS
En comparaison avec le sélecteur de descendants, le sélecteur d'enfant (Child selectors) ne peut sélectionner que les éléments qui sont des éléments enfants d'un élément donné.
Sélection de l'enfant
Si vous ne souhaitez pas sélectionner des éléments descendants arbitraires, mais plutôt restreindre la portée pour ne sélectionner que les éléments enfants d'un élément spécifique, utilisez le sélecteur d'enfant (Child selector).
Par exemple, si vous souhaitez sélectionner uniquement les éléments <strong>strong</strong> qui sont des éléments enfants de l'élément <h1>, vous pouvez écrire ainsi :
h1 > strong {color:red;}
Cette règle transformera les deux éléments <strong>strong</strong> situés sous le premier <h1> en rouge, mais l'élément <strong>strong</strong> du second <h1> ne sera pas affecté :
<h1>Ceci est <strong>très</strong> <strong>très</strong> important.</h1> <h1>Ceci est <em>très <strong>très</strong></em> important.</h1>
Explication de la syntaxe
Vous devez déjà avoir remarqué que le sous-sélecteur utilise le symbole de大于（sous-sélecteur).
Il peut y avoir des espaces blancs entre les deux côtés du symbole de sous-sélecteur, ce qui est optionnel. Par conséquent, les following méthodes sont toutes correctes :
h1 > strong h1> strong h1 >strong h1>strong
Si on lit de droite à gauche, le sélecteur h1 > strong peut être interprété comme «Sélectionner tous les éléments strong qui sont des éléments enfants de l'élément h1».
Association de sélecteurs de descendants et de sélecteurs d'enfants
Voyons ce sélecteur ci-dessous :
table.company td > p
Ce sélecteur sélectionne tous les éléments p qui sont des éléments enfants de l'élément td, l'élément td lui-même hérite de l'élément table, qui a une classe contenant company.
- Page précédente Sélecteurs de descendants CSS
- Page suivante Sélecteurs de frère adjacent CSS
