Sélecteurs relationnels

Cette page Web est une adaptation du travail de Philippe Simard.

Sommaire

Les sélecteurs relationnels

Les sélecteurs relationnels

Sélecteur descendant

A B { déclaration(s) }

Le sélecteur descendant cible tout élément B qui a un ancêtre A. Autrement dit, tout B descendant direct ou indirect d'un A.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteur descendant</title>
  <style>
    /* descendants */
    div em  { color: red; }
    span em { background-color: yellow; }
  </style>
</head>
<body>
    <p>
      Les descendants du DIV sont en rouge. Ceux du
      SPAN sur fond jaune.
    </p>
    <div>
      texte <em>EM</em> texte <span> texte
      <em>EM</em> texte </span> texte <em>EM</em> 
      texte
    </div>
</body>
</html>

Sélecteur enfant

A > B { déclaration(s) }

Le sélecteur enfant cible tout élément B qui a un parent A. Autrement dit, tout B descendant direct d'un A.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteur enfant</title>
  <style>
    /* enfants (descendants directs) */
    div > em  { color: red; }
    span > em { background-color: yellow; }
  </style>
</head>
<body>
    <p>
      Les enfants du DIV sont en rouge. Ceux du
      SPAN sur fond jaune.
    </p>
    <div>
      texte <em>EM</em> texte <span> texte 
      <em>EM</em> texte </span> texte <em>EM</em> 
      texte
    </div>
</body>
</html>

Sélecteur voisin direct

A + B { déclaration(s) }

Le sélecteur voisin direct cible tout élément B qui suit immédiatement un élément A.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteur voisin direct</title>
  <style>
    /* voisin direct */
    em + em   { color: red; }
    span + em { background-color: yellow; }
  </style>
</head>
<body>
<p>
  Les EM voisins directs d'un EM sont en rouge. Ceux
  voisins directs d'un SPAN sont sur fond jaune.
</p>
<div>
  <em>EM</em> <em>EM</em> <em>EM</em>
  <span>SPAN</span> <em>EM</em> <em>EM</em>
  <em>EM</em>
</div>
</body>
</html>

Sélecteur voisins généraux

A ~ B { déclaration(s) }

Le sélecteur voisins généraux cible tout élément B qui suit, dans le même parent, un élément A.

Exemple

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Exemple de sélecteur voisins
      généraux</title>
  <style>
    /* voisins généraux */
    em ~ em   { color: red; }
    span ~ em { background-color: yellow; }
  </style>
</head>
<body>
<p>
  Les EM voisins généraux d'un EM sont en rouge. Ceux
  voisins généraux d'un SPAN sont sur fond jaune.
</p>
<div>
  <em>EM</em> <em>EM</em> <em>EM </em>
  <span>SPAN</span> <em>EM</em> <em>EM</em>
  <em>EM</em>
</div>
</body>
</html>

Tableau résumé :

Sélecteur	Notation	Explication
descendant	A B	Cible tout élément B qui a un ancêtre A.
enfant	A > B	Cible tout élément B qui a un parent A (parent immédiat).
voisin direct	A + B	Cible tout élément B qui suit immédiatement un élément A.
voisins généraux	A ~ B	Cible tout élément B qui suit, dans le même parent (au même niveau), un élément A.

Encore un exemple : considérons le code HTML suivant (remarquons particulièrement les éléments em) :

<p>Voici la liste des <em>mammifères</em> et des <em>reptiles</em></p>
<ul>
  <li>Mammifères
    <ul id="liste_mammif">
      <li>Lapin</li>
      <li>Castor</li>
      <li>Porc-épic <em>à longues dents</em></li>
    </ul>
  </li>
  <li>Reptiles
    <ul id="liste_rept">
      <li>Serpent</li>
      <li>Lézard</li>
    </ul>
  </li>
</ul>
<p>Les animaux sont des <em>êtres vivants</em> <mark>fascinants</mark> et
<em>beaux</em></p>

et les règles CSS suivantes :

ul em {color: red;}
p > em {color: blue;}
em + em {color: fuchsia;}

La première règle ne s'applique qu'à la chaîne "à longues dents", car c'est le seul élément em à l'intérieur d'un élément ul, même s'il n'est pas un enfant immédiat

La deuxième règle devrait s'appliquer aux chaînes "mammifères" et "reptiles" de la première ligne, de même qu'aux chaînes "êtres vivants" et "beaux" de la dernière ligne

C'est ce qui arrive, sauf pour la chaîne "reptiles" qui est soumise à la troisième règle étant donné qu'il s'agit d'un élément em qui suit immédiatement un autre élément em

Notons que cette règle ne s'applique pas à la dernière ligne étant donné que les éléments em sont séparés par un élément mark

On peut combiner ceci avec le sélecteur d'ID

Par exemple, dans la liste à puce, nous allons nous servir des deux id pour formater différemment les éléments de la première sous-liste et ceux de la deuxième :

#liste_mammif li {font-family: sans-serif;}
#liste_rept li {font-family: monospace;}

Les deux listes ont maintenant des polices de caractères différentes :