Sélecteurs CSS

Dernière mise à jour le 14 novembre 2022

Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

Sélecteurs simples

Sélecteurs de type

Les sélecteurs de type ciblent des éléments en fonction de leur nom. Ainsi, lorsqu'un sélecteur de type est utilisé seul, il ciblera tous les éléments de ce type contenus dans le document.

Syntaxe :

élément {
  propriété: valeur;
}

Exemple :

/* tous les titres de niveau 5 */

h5 {
  color: red;
}

<h5>Lorem ipsum</h5>
<p>
  Lorem ipsum dolor sit amet. Aut sequi maxime et repellat provident et quas
  laboriosam sed dolor voluptas et quia vero non quia quaerat est quas
  aspernatur.
</p>

<h5>Dolor sit amet</h5>
<p>
  Cum alias nostrum sit vitae commodi et officia necessitatibus quo minima
  iure! 
</p>

Sortie :

Sélecteurs de classe

Les sélecteurs de classe permettent de cibler des éléments d'un document en fonction du contenu de l'attribut class de chaque élément.

Syntaxe :

.nom_de_classe {
  propriété: valeur;
}

Exemple :

/* tous les éléments de classe "biz" */

.biz {
  background-color: lavender;
}

/* tous les titres de niveau 5 de classe "biz" */

h5.biz {
  text-decoration: underline;
}

<h5 class="biz">Lorem ipsum</h5>
<p class="biz">
  Lorem ipsum dolor sit amet. Aut sequi maxime et repellat provident et quas
  laboriosam sed dolor voluptas et quia vero non quia quaerat est quas
  aspernatur.
</p>

<h5>Dolor sit amet</h5>
<p>
  Cum alias nostrum sit vitae commodi et officia necessitatibus quo minima
  iure! 
</p>

Sortie :

Sélecteurs d'identifiant

Un sélecteur d'identifiant (ID selector) permet, pour un document HTML, de cibler un élément grâce à la valeur de son attribut id. Il faut que la valeur soit exactement la même que celle du sélecteur pour que l'élément soit effectivement ciblé.

Syntaxe :

#identifiant {
  propriété: valeur;
}

Exemple :

/* l'élément dont l'identifiant est "nostrum" */

#nostrum {
  color: blue;
}

<h5>Lorem ipsum</h5>
<p>
  Lorem ipsum dolor sit amet. Aut sequi maxime et repellat provident et quas
  laboriosam sed dolor voluptas et quia vero non quia quaerat est quas
  aspernatur.
</p>

<h5>Dolor sit amet</h5>
<p>
  Cum alias <span id="nostrum">nostrum sit vitae commodi</span> et officia necessitatibus
  quo minima iure! 
</p>

Sortie :

Sélecteur universel

L'astérisque (*) est le sélecteur universel en CSS. Il correspond à un élément de n'importe quel type.

Syntaxe :

* {
  propriété: valeur;
}

Avec le code CSS suivant, tous les éléments auront une marge de 2 pixels :

/* tous les éléments */

* {
  margin: 2px;
}

Sélecteurs d'attribut

Les sélecteurs d'attribut permettent de cibler un élément selon la présence d'un attribut ou selon la valeur donnée d'un attribut.

Syntaxe :

Avec le code CSS suivant, tous les éléments ayant un attribut "alt" auront une bordure pointillée et tous ceux ayant un attribut "alt" dont la valeur est "exemple" auront une bordure pleine :

[alt] {
  border: dotted black 1px;
}

[alt=exemple] {
  border: solid black 1px;
}

Sélecteurs relationnels

Les sélecteurs relationnels, aussi appelés combinateurs, mettent en jeu un élément par rapport à un autre.

Sélecteurs de voisin direct

Ce combinateur permet de sélectionner un élément uniquement si celui-ci suit (immédiatement) un élément donné et que les deux éléments sont les fils d'un même élément parent.

Syntaxe :

premier_element + element_cible {
  propriété: valeur;
}

Exemple :

em {
  color: green;
}

/* tous les "em" qui suivent (immédiatement) un "strong"

strong + em {
  color: red;
}

<p>
  <strong>Lorem ipsum</strong> dolor sit amet. Non sint corrupti <em>sit galisum</em> amet sit
  inventore dolorum <em>ainternos incidunt</em> et ipsam quia. <strong>Sit quibusdam</strong>
  illo vel alias numquam est rerum accusamus <em>vel magnam</em> adipisci ut incidunt fugit ut
  <em>velit inventore</em>?
</p>

Sortie :

Sélecteurs de voisins

Ce combinateur permet de sélectionner un élément si celui-ci correspond au second sélecteur et est précédé (mais pas forcément voisin immédiat) d'un autre élément correspondant au premier sélecteur qui partage le même parent.

Syntaxe :

premier_élément ~ second_élément {
  propriété: valeur;
}

Exemple :

em {
  color: green;
}

/* tous les "em" qui suivent un "strong"

strong ~ em {
  color: red;
}

<p>
  Lorem ipsum dolor sit amet. Non sint corrupti <em>sit galisum</em> amet sit
  inventore dolorum <em>ainternos incidunt</em> et ipsam quia. <strong>Sit quibusdam</strong>
  illo vel alias numquam est rerum accusamus <em>vel magnam</em> adipisci ut incidunt fugit ut
  <em>velit inventore</em>?
</p>

Sortie :

Sélecteurs d'éléments enfants

Ce combinateur cible les éléments correspondant au second sélecteur et qui sont des enfants directs des éléments ciblés par le premier sélecteur.

Syntaxe :

selecteur1 > selecteur2 {
  propriété: valeur;
}

Exemple :

...
  <style>
    /* tous les "p" enfants directs de "body" */
    
    body > p {
      color: red;
    }
  </style>
</head>
<body>
  <section>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </section>
  <p>Lorem ipsum dolor sit amet</p>
</body>
</html>

Sortie :

Sélecteurs d'éléments descendants

Ce combinateur cible les éléments correspondant au second sélecteur et qui sont des descendants (enfants directs ou indirects) des éléments ciblés par le premier sélecteur.

Syntaxe :

sélecteur1 sélecteur2 {
  propriété: valeur;
}

Exemple :

...
  <style>
    /* tous les "p" enfants directs ou indirects d'un "section" */
    
    section p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>Lorem ipsum dolor sit amet</p>
  <section>
    <p>Lorem ipsum dolor sit amet</p>
    <div>
      <p>Lorem ipsum dolor sit amet</p>
      <p>Lorem ipsum dolor sit amet</p>
    </div>
  </section>
</body>
</html>

Sortie :

Pseudo-classes

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration.

Syntaxe :

sélecteur:pseudo-classe {
  propriété: valeur;
}

Remarquez le symbole : entre le sélecteur et la pseudo-classe.

Par exemple, la pseudo-classe :hover permet d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un lien hypertexte par exemple).

/* affecte tous les éléments "p" lorsque survolés par le curdeur de la souris */

p:hover {
  background-color: yellow;
}

Les pseudo-classes permettent d'appliquer un style à un élément en fonction de facteurs externes comme l'historique de navigation (:visited), le statut d'un élément de formulaire (:checked) ou la position de la souris (:hover).

Voici quelques pseudo-classes très utilisées :

Pseudo-classe	Facteur(s) externe(s)
:active	L'élément est activé par l'utilisateur.
:checked	L'élément de formulaire est sélectionné.
:disabled	L'élément de formulaire est désactivé.
:enabled	L'élément de formulaire est activé.
:first-child	Élément qui est le premier élément fils par rapport à son élément parent. <style> p:first-child { background-color: pink; } </style> </head> <body> <p>Premier paragraphe de "body"</p> <p>Second paragraphe de "body"</p> <div> <p>Premier paragraphe de "div"</p> <p>Second paragraphe de "div"</p> </div> </body>
:last-child	Élément qui est le dernier enfant de son parent (inverse de :first-child).
:first-of-type	Premier élément d'un type donné parmi ceux d'un même élément parent (et de même niveau). <style> p:first-of-type { background-color: pink; } </style> </head> <body> <div>Div</div> <p>Paragraphe</p> <p>Paragraphe</p> <div>Div</div> </body>
:last-of-type	Élément qui est le dernier enfant d'un type donné dans la liste des enfants de l'élément parent (inverse de :first-of-type).
:nth-child(n)	Élément qui est le n-ième enfant de l'élément parent. <style> p:nth-child(3) { background-color: plum; } </style> </head> <body> <p>Paragraphe</p> <p>Paragraphe</p> <p>Paragraphe</p> <p>Paragraphe</p> </body>
:nth-last-child(n)	Même chose que :nth-child(n) mais en commençant par la fin.
:focus	L'élément est sélectionné par le clavier ou la souris.
:hover	Apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.
:nth-of-type(n)	Élément qui est le n-ième enfant de même type, de l'élément parent. <style> div:nth-of-type(3) { background-color: aquamarine; } </style> </head> <body> <div>Div</div> <p>Paragraphe</p> <div>Div</div> <p>Paragraphe</p> <div>Div</div> <p>Paragraphe</p> </body>
:nth-last-of-type(n)	Même chose que :nth-of-type(n) mais en commençant par la fin.
:required	Élément <input> pour lequel l'attribut required est activé.
:visited	Apparence d'un lien hypertexte <a> après que l'utilisateur l'a visité.

Pseudo-éléments

Un pseudo-élément est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle.

Syntaxe :

sélecteur::pseudo-élément {
  propriété: valeur;
}

Remarquez le symbole :: entre le sélecteur et le pseudo-élément.

Par exemple, le pseudo-élément ::first-line permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.

/* affecte la première ligne de chaque élément "p" */

p::first-line {
  color: blue;
  text-transform: uppercase;
}

Voici quelques pseudo-éléments très utilisés :

Pseudo-élément	Partie(s) de l'élément
::after	Permet d'insérer (à l'aide de la propriété content) quelque chose après le contenu de l'élément sélectionné. <style> p::after { content: " (à compléter)"; } </style> </head> <body> <div>Div</div> <p>Paragraphe</p> <p>Paragraphe</p> <div>Div</div> </body>
::before	Permet d'insérer (à l'aide de la propriété content) quelque chose avant le contenu de l'élément sélectionné.
::first-letter	Première lettre de la première ligne d'un bloc. <style> p::first-letter { font-size: 200%; font-weight: bold; } </style> </head> <body> <p>Ceci est un paragraphe</p> <p>Et ceci est un autre</p> </body>
::first-line	Première ligne d'un élément.

Résumé

Exemple récapitulatif

Encore un exemple pour terminer : 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.

Pour cela il faudrait la règle suivante : em - em {color: fuchsia;}.

On peut combiner ceci avec le sélecteur d'identifiant.

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 {         /* ou #liste_mammif > li */
  font-family: sans-serif;
  }
#liste_rept li {           /* ou #liste_rept > li */
  font-family: monospace;
}

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