Sélecteurs CSS
Un sélecteur CSS sélectionne le ou les éléments HTML que vous souhaitez styliser.
Sélecteurs CSS
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électionnez des éléments en fonction du nom, de l'identifiant, de la classe)
- Sélecteurs de combinateur (sélectionnez des éléments en fonction d'une relation spécifique entre eux)
- Sélecteurs de pseudo-classe (sélectionner des éléments en fonction d'un certain état)
- Sélecteurs de pseudo-éléments (sélectionner et styliser une partie d'un élément)
- Sélecteurs d'attributs (sélectionnez des éléments en fonction d'un attribut ou d'une valeur d'attribut)
Cette page explique les sélecteurs CSS les plus élémentaires.
Le sélecteur d'éléments 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'identifiant CSS
Le sélecteur d'id utilise l'attribut id d'un élément HTML pour sélectionner un élément spécifique.
L'identifiant d'un élément est unique dans une page, donc le sélecteur d'identifiant est utilisé pour sélectionner un élément unique !
Pour sélectionner un élément avec un identifiant spécifique, écrivez un caractère dièse (#), 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'identifiant ne peut pas commencer par un chiffre !
Le sélecteur de classe CSS
Le sélecteur de classe sélectionne les éléments HTML avec un attribut de classe spécifique.
Pour sélectionner des éléments avec une classe spécifique, écrivez un point (.) suivi du nom de la classe.
Exemple
Dans cet exemple, tous les éléments HTML avec class="center" seront rouges et centrés :
.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 rouges et centrés :
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 chiffre !
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 vaudra mieux regrouper les sélecteurs, pour minimiser le code.
Pour grouper des 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;
}
Tous les sélecteurs simples CSS
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |