Sélecteurs CSS

Sélecteurs CSS

Les sélecteurs CSS sont utilisés pour « trouver » (ou sélectionner) les éléments HTML sur lesquels appliquer des styles.

Nous pouvons diviser les sélecteurs CSS en cinq catégories :

Cette page expliquera les sélecteurs CSS de base.

Sélecteur élément CSS

Les sélecteurs d'élément sélectionnent les éléments HTML en fonction du nom de l'élément.

Instance

Ici, tous les éléments <p> de la page seront centrés et auront une couleur de texte rouge :

p {
  text-align: center;
  color: red;
}

Essayez-le vous-même

Sélecteur d'identifiant CSS

Le sélecteur d'identifiant utilise l'attribut id des éléments HTML pour sélectionner des éléments spécifiques.

L'identifiant des éléments est unique dans la page, donc le sélecteur d'identifiant est utilisé pour sélectionner un élément unique !

Pour sélectionner un élément ayant un identifiant spécifique, écrivez un diamant (＃) suivi de l'identifiant de l'élément.

Instance

Cette règle CSS s'appliquera à l'élément HTML avec id="para1" :

#para1 {
  text-align: center;
  color: red;
}

Essayez-le vous-même

Attention :Les noms d'identifiant ne peuvent pas commencer par un chiffre.

Sélecteur de classe CSS

Les sélecteurs de classe sélectionnent les éléments HTML ayant une classe spécifique.

Pour sélectionner un élément ayant une classe spécifique, écrivez un point (.) suivi du nom de la classe.

Instance

Dans cet exemple, tous les éléments HTML portant class="center" seront en rouge et centrés :

.center {
  text-align: center;
  color: red;
}

Essayez-le vous-même

Vous pouvez également spécifier que seuls certains éléments HTML sont affectés par une classe.

Instance

Dans cet exemple, seuls les éléments <p> ayant class="center" seront centrés :

p.center {
  text-align: center;
  color: red;
}

Essayez-le vous-même

Les éléments HTML peuvent également utiliser plusieurs classes.

Instance

Dans cet exemple, l'élément <p> sera mis en forme en fonction de class="center" et class="large" :

<p class="center large">Ce paragraphe cite deux classes.</p>

Essayez-le vous-même

Attention :Les noms de classe ne peuvent pas commencer par un chiffre !

Sélecteur universel CSS

Le sélecteur universel ( *) sélectionne tous les éléments HTML de la page.

Instance

Les règles CSS suivantes affecteront chaque élément HTML de la page :

* {
  text-align: center;
  color: blue;
}

Essayez-le vous-même

Sélecteurs de groupe CSS

Les sélecteurs de groupe sélectionnent tous les éléments HTML ayant la même définition de style.

Voyez ci-dessous le code CSS (les éléments h1, h2 et p ont la même définition de style) :

h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}
p {
  text-align: center;
  color: red;
}

Il est préférable de regrouper les sélecteurs pour réduire le code au maximum.

Pour regrouper des sélecteurs, utilisez des virgules pour séparer chaque sélecteur.

Instance

Dans cet exemple, nous regroupons les sélecteurs mentionnés précédemment :

h1, h2, p {
  text-align: center;
  color: red;
}

Essayez-le vous-même

Tous les sélecteurs CSS simples

Sélecteur Exemple Description de l'exemple
.class .intro Sélectionnez tous les éléments de classe "intro".
#id #firstname Sélectionnez l'élément avec id="firstname".
* * Sélectionnez tous les éléments.
element p Sélectionnez tous les éléments <p>.
element,element,.. div, p Sélectionnez tous les éléments <div> et tous les éléments <p>.

Lecture complémentaire

Livres de complément :Sélecteur élément CSS

Livres de complément :Groupe de sélecteurs CSS

Livres de complément :Détails du sélecteur de classe CSS

Livres de complément :Détails du sélecteur ID CSS

Livres de complément :Détails du sélecteur d'attribut CSS

Livres de complément :Sélecteur descendant CSS

Livres de complément :Sélecteur enfant CSS

Livres de complément :Sélecteur frère adjacent CSS