Auteur: Jérôme Forget. Publié le 6 mars 2007.
CSS nous permet une assez grande précision dans le sélection d'un élément. Ainsi, dans certains cas, nous voulons sélectionner un élément seulement dans un certain contexte. Par exemple, on peut vouloir sélectionner seulement les éléments strong qui sont à l'intérieur d'un h2. C'est ce que nous permet le sélecteur d'enfant, de sélectionner un élément qui est l'enfant d'un autre.
Le sélecteur d'enfant se compose de deux sélecteurs ou plus, séparés par le caractère <.
h2 < strong { color: red; }
En lisant de droite à gauche, on comprend que la couleur rouge sera appliquée sur tous les éléments strong qui sont les enfants directs d'un élément h2.
Dans l'exemple suivant, le texte dans la balise strong ne sera pas coloré en rouge, car il n'est pas un enfant direct de l'élément h2, mais plutôt un de ses descendants.
<h2>Du texte qui <a href="#">ne sera <strong>pas coloré en rouge</strong></a>.</h2>
La relation parent-enfant est donc une relation où un élément se trouve directement à l'intérieur d'un autre. Dans l'exemple précédant, l'élément a est un enfant de h2, alors que strong est un enfant de a, mais un descendant de h2.