7.3: Sélecteur de descendants

Un sélecteur CSS sert à dire « je veux appliquer ce style à tels éléments ».

Pour l'instant on a vu

  • « p » : « appliquer ce style à tous les éléments <p> »
  • « .xyz » : « appliquer ce style à tous les éléments qui ont class="xyz" »
  • « #xyz » : « appliquer ce style à l'élément qui a id="xyz" »

Comment faire pour, par exemple, « appliquer ce style uniquement aux éléments <a> qui sont contenus dans un titre <h1> » ?

r

Prenons un autre exemple:

<ul id="liste1">
    <li>abc</li>
    <li>def</li>
</ul>

<ul id="liste2">
    <li>xyz</li>
    <li>rst</li>
</ul>


Supposons qu'on veuille changer uniquement la couleur des "li" de la deuxième liste.
li {color: red;}
ne marche pas, car elle change la couleur des "li" dans les deux listes.

On peut utiliser un sélecteur composé de deux sélecteurs simples:
#liste2 li {color: red;}
L'espace entre "#liste2" et "li" est très important: il veut dire "descendant de".

Donc: "#liste2 li" veut dire "tous les li qui sont descendants de #liste2

Remarquez: pour bien comprendre le sélecteur il faut le dire en français de droite à gauche.