Les sélecteurs CSS sont utilisés pour « trouver » (ou sélectionner) les éléments HTML que vous souhaitez styliser.
Nous pouvons diviser les sélecteurs CSS en cinq catégories:
- Sélecteurs simples (sélectionner des éléments en fonction du nom, de l’id, de la classe)
- Sélecteurs combinateurs (sélectionner des éléments en fonction d’une relation spécifique entre eux)
- Sélecteurs de pseudo-classe (éléments de sélection basés sur un certain état)
- Sélecteurs de pseudo-éléments (sélectionner et styliser une partie d’un élément)
- Sélecteurs d’attributs (sélectionner des éléments en fonction d’un attribut ou d’une valeur d’attribut)
Cette page vous expliquera les sélecteurs CSS les plus élémentaires.
Le sélecteur d’élément CSS
Le sélecteur d’élément sélectionne les éléments HTML en fonction du nom de l’élément.
Exemple
Ici, tous les éléments <p> de la page seront alignés au centre, avec une couleur de texte rouge:
p {
text-align: center;
color: red;
}
Le sélecteur d’ID CSS
Le sélecteur d’ID utilise l’attribut id d’un élément HTML pour sélectionner un élément spécifique.
L’ID d’un élément est unique dans une page, donc le sélecteur d’ID est utilisé pour sélectionner un élément unique!
Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère de hachage (#), suivi de l’identifiant de l’élément.
Exemple
La règle CSS ci-dessous sera appliquée à l’élément HTML avec id = « para1 »:
#para1 {
text-align: center;
color: red;
}
Remarque: un nom d’identification ne peut pas commencer par un nombre!
Le sélecteur de classe CSS
Le sélecteur de classe sélectionne des éléments HTML avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, écrivez un caractère point (.), Suivi du nom de la classe.
Exemple
Dans cet exemple, tous les éléments HTML avec class = « center » seront rouges et alignés au centre:
.center {
text-align: center;
color: red;
}
Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.
Exemple
Dans cet exemple, seuls les éléments <p> avec class = « center » seront alignés au centre:
p.center {
text-align: center;
color: red;
}
Les éléments HTML peuvent également faire référence à plusieurs classes.
Exemple
Dans cet exemple, l’élément <p> sera stylisé selon class = « center » et class = « large »:
<p class= »center large »>This paragraph refers to two classes.</p>
Remarque: Un nom de classe ne peut pas commencer par un nombre!
Le sélecteur universel CSS
Le sélecteur universel (*) sélectionne tous les éléments HTML de la page.
Exemple
La règle CSS ci-dessous affectera chaque élément HTML de la page:
* {
text-align: center;
color: blue;
}
Le sélecteur de regroupement CSS
Le sélecteur de regroupement sélectionne tous les éléments HTML avec les mêmes définitions de style.
Regardez le code CSS suivant (les éléments h1, h2 et p ont les mêmes définitions de style):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
Il sera préférable de regrouper les sélecteurs, pour minimiser le code.
Pour regrouper les sélecteurs, séparez chaque sélecteur par une virgule.
Exemple
Dans cet exemple, nous avons regroupé les sélecteurs du code ci-dessus:
h1, h2, p {
text-align: center;
color: red;
}