Sélecteurs descendants CSS

Le sélecteur de descendance (descendant selector) est également appelé sélecteur inclusif.

Les sélecteurs descendants peuvent choisir des éléments qui sont descendants d'un élément donné.

Sélection d'éléments en fonction du contexte

Nous pouvons définir des règles de sélecteurs descendants pour créer des règles qui fonctionnent dans certaines structures de document, mais pas dans d'autres.

Par exemple, si vous souhaitez appliquer le style uniquement aux éléments em dans h1, vous pouvez écrire ainsi :

h1 em {color:red;}

Cette règle changera le texte des éléments em descendants de l'élément h1 en rouge. Les autres textes em (comme dans un paragraphe ou une citation) ne seront pas sélectionnés par cette règle :

<h1>Ceci est un <em>important</em> titre</h1>
<p>Ceci est un paragraphe <em>important</em>。</p>

Essayer vous-même

Bien sûr, vous pouvez également placer une attribut class sur chaque élément em trouvé dans h1, mais évidemment, le sélecteur descendant est plus efficace.

Explication grammaticale

Dans les sélecteurs descendants, le côté gauche de la règle comprend deux ou plusieurs sélecteurs séparés par des espaces. Les espaces entre les sélecteurs sont des opérateurs de combinaison. Chaque opérateur de combinaison peut être interprété comme '... trouvé dans...', '... fait partie de...', '... est descendant de...', mais il faut lire le sélecteur de droite à gauche.

Par conséquent, le sélecteur h1 em peut être interprété comme 'tout em qui est descendant de l'élément h1'. Si vous lisez le sélecteur de gauche à droite, vous pouvez le dire ainsi : 'Tous les h1 contenant em appliqueront le style suivant à cet em'.

Application concrète

Les sélecteurs descendants sont extrêmement puissants. Grâce à eux, il est possible de réaliser des tâches impossibles en HTML.

Supposons qu'il y ait un document contenant une barre latérale et une zone principale. Le fond de la barre latérale est bleu, et le fond de la zone principale est blanc. Ces deux zones contiennent des listes de liens. Il ne faut pas que tous les liens soient bleus, car dans le cas contraire, les liens bleus dans la barre latérale ne seraient pas visibles.

La solution consiste à utiliser les sélecteurs descendants. Dans ce cas, vous pouvez attribuer la classe 'sidebar' au div contenant la barre latérale et la valeur de la classe du contenu principal en 'maincontent'. Ensuite, écrivez les styles suivants :

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

Il y a un aspect souvent négligé des sélecteurs descendants, à savoir que l'intervalle hiérarchique entre deux éléments peut être infini.

Par exemple, si on écrit ul em, cette syntaxe sélectionnera tous les éléments em hérités de l'élément ul, peu importe le niveau de nesting de l'élément em.

Par conséquent, ul em sélectionnera tous les éléments em des balises suivantes :

<ul>
  <li>Élément de liste 1</li>
    <ol>
      <li>Élément de liste 1-1</li>
      <li>Élément de liste 1-2</li>
      <li>Élément de liste 1-3</li>
        <ol>
          <li>Élément de liste 1-3-1</li>
          <li>Élément de liste</li> <em>1-3-2</em></li>
          <li>Élément de liste 1-3-3</li>
        </ol>
      </li>
      <li>Élément de liste 1-4</li>
    </ol>
  </li>
  <li>Élément de liste 2</li>
  <li>Élément de liste 3</li>
</ul>

Essayer vous-même