Sélecteurs CSS

Ordre d'importance (spécificité)

Puisque plusieurs sélecteurs peuvent s'appliquer sur un élément d'une page, il existe un ordre d'importance à ces sélecteurs. On appelle l'ordre d'importance la spécificité des sélecteurs.

La spécificité (ordre d'importance) des sélecteurs s'applique ainsi :

1. identifiant (le plus important)
2. classe
3. sélecteur d'élément

Exemple :

<p id="extrait" class="fond-rouge">Voici un exemple de paragraphe ayant à la fois les trois sélecteurs CSS appliqués.</p>

p{
    font-style: normal;
    color: red;
}

.fond-rouge{
    background-color: red;
    color: white;
}

#extrait{
    font-style: italic;
    background-color: lightgrey;
}

Les trois sélecteurs CSS ci-haut s'appliquent sur la balise de paragraphe. Toutefois, puisque la spécificité des sélecteurs implique un ordre d'importance, notre paragraphe aura donc le style final :

{
    font-style: italic;
    background-color: lightgrey;
    color: white;
}

Sélecteurs combinés

Les sélecteurs combinés sont des sélecteurs utilisant un caractère spécial pour décrire la relation entre les deux.

Quelques caractères possibles, appelés combinateurs, sont :

• L'espace (descendant)
• Le plus grand que (>) (enfant direct)
• L'addition (+) (voisin direct)

La descendance

Un élément est dit descendant d'un autre lorsqu'il est inséré entre l'ouverture et la fermeture d'une autre balise.

Exemple :

<p>
    Un paragraphe dans lequel on retrouve du <span class="emphase">texte mis en évidence</span> et un lien cliquable <a href="https://www.w3schools.com">vers un autre site web</a>.
</p>

Dans l'exemple ci-haut, la balise <span> et la balise <a> sont des descendants de la balise <p> puisqu'elles se retrouvent l'intérieur de l'ouverture et de la fermeture de cette dernière.

Pour appeler des éléments descendants d'un autre, on utilise l'espace. On écrit d'abord le parent, suivi d'un espace, suivi du descendant.

Dans l'exemple suivant, on indique que les liens cliquables qui se trouvent à l'intérieur d'un paragraphe doivent être affichés en vert, sans souligné.
On indique aussi que les éléments dont la classe est emphase et qui se trouvent dans un paragraphe doivent être écris en gras et italique.

p a {
    color: green;
    text-decoration: none;
}

p .emphase {
    font-style: italic;
    font-weight: bold;
}

À noter: Un descendant peut être de plusieurs niveaux l'enfant d'un autre. Le sélecteur de descendance s'appliquera quand même, au même titre que les arrières petits-enfants héritent des traits de leur mère, de leur grand-mère et de leur arrière grand-mère.

Sélecteur d'enfant direct

Le sélecteur d'enfant direct permet d'appliquer des styles aux enfants de premier niveau intégrés dans une autre balise.

Le sélecteur d'enfant direct s'écrit avec le caractère plus grand que (>).

Exemple :

<div>
  <p>Paragraphe 1 dans la div.</p>
  <p>Paragraphe 2 dans la div.</p>
  <section><p>Paragraphe 3 dans la div, avec section.</p></section> 
</div>

div > p {
  background-color: yellow;
}

Résultat :

Ici, le paragraphe 3 n'hérite pas du fond jaune puisqu'il n'est pas un enfant direct de la div, mais plutôt un descendant.

Les voisins directs

Le sélecteur de voisin direct permet d'appliquer des styles à des balises qui se trouvent tout de suite après une autre de même niveau.

Le sélecteur de voisin direct s'écrit avec le caractère d'addition (+).

Exemple :

  <p>Paragraphe 1 .</p>
  <p>Paragraphe 2 .</p>
  <section><p>Paragraphe 3, dans une section.</p></section> 

p + p {
    color: purple;
}

Résultat :

Ici, seul le deuxième paragraphe est en pourpre puisqu'il est le seul à être un voisin directement après un autre paragraphe.

Les pseudo-classes (états)

Les pseudo-classes sont des mots utilisés pour indiquer l'état dans lequel un élément doit se trouver pour que le style s'applique.

On peut ainsi modifier le style d'éléments d'une page si, par exemple, la souris passe au-dessus, si un lien cliquable a déjà été visité, etc.

Dans l'exemple suivant, on modifie la couleur de fond des paragraphes, lorsque le curseur de la souris se trouve au-dessus :

p:hover {
    background-color: yellow;
}

Quelques sélecteurs d'état utiles pour les liens cliquables :

a:link { color: blue; }          /* Liens non visités */
a:visited { color: purple; }     /* Liens visités */
a:hover { background: yellow; }  /* Liens survolés */
a:active { color: red; }         /* Liens actifs - lorsque le bouton gauche de la souris est maintenu enfoncé */

Autres sélecteurs

Il existe une multitude d'autres sélecteurs CSS : sélecteurs d'attributs, sélecteurs de pseudo-éléments, etc. Le but du cours n'est pas de les apprendre tous, mais de développer une bonne base et un réflexe de distinction minimal des éléments d'une page pour appliquer des styles spécifiques.

Pour une liste complète des sélecteurs et de leur utilité, référez-vous aux liens suivants :

Sélecteurs CSS sur MDN (en français)

Sélecteurs CSS sur w3Schools (en anglais)