combinateur descendant

On utilise le combinateur descendant pour sélectionner un élément qui est un descendant d’un autre élément. On peut par exemple vouloir appliquer des styles particuliers à des liens, mais uniquement à des liens situés dans un élément navigation.

Le combinateur descendant consiste en une espace suivant le sélecteur de l’ancètre et précédant le sélecteur du descendant que l’on souhaite cibler.

/* on sélectionne tous les .descendant ayant un élément .ancetre pour ancètre */
.ancetre .cible {
   propriete : valeur ;
}

<div class="ancetre">
   <div class="cible">
      <div class="cible"></div>
   </div>
</div>
<div class="cible">non sélectionné</div>

Le dernier élément .cible n’est pas sélectionné car n’a pas d’ancêtre avec la classe .ancetre.