Sélecteurs dérivés du CSS

Sélecteur dérivé

En définissant le style en fonction de la position de l'élément dans le contexte, vous pouvez rendre la balise plus concise.

Dans CSS1, les sélecteurs utilisés pour appliquer les règles de cette manière sont appelés sélecteurs contextuels (contextual selectors), car ils dépendent du contexte pour appliquer ou éviter une règle. Dans CSS2, ils sont appelés sélecteurs dérivés, mais peu importe ce que vous appelez, leur fonction est la même.

Les sélecteurs dérivés vous permettent de déterminer le style d'un élément en fonction du contexte documentaire. En utilisant les sélecteurs dérivés de manière raisonnable, nous pouvons rendre le code HTML plus ordonné.

Par exemple, si vous souhaitez que les éléments strong de la liste soient en italique plutôt qu'en gras, vous pouvez définir un sélecteur dérivé de la manière suivante :

li strong {
    font-style: italic;
    font-weight: normal;
  }

Veuillez noter le contexte des codes bleus marqués <strong> :

<p><strong>Je suis en gras, pas en italique, car je ne suis pas dans la liste, donc cette règle ne s'applique pas à moi</strong></p>
<ol>
<li><strong>Je suis en italique. C'est parce que l'élément strong est situé à l'intérieur de l'élément li.</strong></li>
<li>Je suis en police normale.</li>
</ol>

Dans l'exemple ci-dessus, seules les balises strong situées à l'intérieur des éléments li ont un style en italique, il n'est pas nécessaire de définir une classe ou un id spécial pour les éléments strong, ce qui rend le code plus concis.

Regardons les règles CSS suivantes :

strong {
     color: red;
     }
h2 {
     color: red;
     }
h2 strong {
     color: blue;
     }

Voici l'HTML affecté :

<p>Le mot fortement mis en avant dans ce paragraphe est<strong>rouge</strong>.</p>
<h2>Ce sous-titre est également rouge.</h2>
<h2>Le mot fortement mis en avant dans ce sous-titre est<strong>blue</strong>.</h2>

Contenu connexe

Si vous souhaitez en savoir plus sur les sélecteurs dérivés, veuillez lire le contenu suivant dans les tutoriels avancés de CodeW3C.com :