CSS Sélecteurs
Un sélecteur CSS sélectionne le(s) élément(s) HTML que vous souhaitez styliser.
Sélecteurs CSS
Les sélecteurs CSS permettent de « trouver » (ou sélectionner) les éléments HTML à styliser.
Les sélecteurs CSS peuvent être divisés en cinq catégories :
- Sélecteurs simples (sélectionnez les éléments en fonction du nom, de l'identifiant, de la classe)
- Sélecteurs combinatoires (sélectionnent des éléments en fonction d'une relation spécifique entre eux)
- Sélecteurs de pseudo-classes (sélectionnent des éléments en fonction d'un certain état)
- Sélecteurs de pseudo-éléments (sélectionnez et stylisez 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 expliquera les sélecteurs CSS les plus basiques.
Le sélecteur d'éléments CSS
Le sélecteur d'éléments 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;
}
Try it Yourself »
Le sélecteur d'identifiant CSS
Le sélecteur d'identifiant 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 au sein d'une page ; le sélecteur d'identifiant permet donc de sélectionner un élément unique !
Pour sélectionner un élément avec un identifiant spécifique, saisissez un 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;
}
Try it Yourself »
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 les éléments d'une classe spécifique, saisissez un 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;
}
Try it Yourself »
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 alignés au centre :
p.center {
text-align: center;
color: red;
}
Try it Yourself »
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 selon class="large":
<p class="center large">Ce paragraphe fait référence à deux classes.</p>
Try it Yourself »
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;
}
Try it Yourself »
Le sélecteur de regroupement CSS
Le sélecteur de regroupement sélectionne tous les éléments HTML ayant les mêmes définitions de style.
Examinez 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 est préférable de regrouper les sélecteurs afin de 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;
}
Try it Yourself »
Tous les sélecteurs simples CSS
| Sélecteur | Exemple | Exemple de description |
|---|---|---|
| #id | #firstname | Sélectionnez l'élément avec id="firstname" |
| .class | .intro | Sélectionne tous les éléments avec class="intro" |
| element.class | p.intro | Sélectionnez uniquement les éléments <p> avec class="intro" |
| * | * | Sélectionne tous les éléments |
| element | p | Sélectionne tous les éléments <p> |
| element,element,.. | div, p | Sélectionne tous les éléments <div> et tous les éléments <p> |
CSS — Sélecteurs simples — Vidéo W3Schools
Vidéo présentant les sélecteurs simples comme un élément, un identifiant et une classe en CSS.
Extrait d'une série de tutoriels vidéo pour apprendre le CSS pour les débutants !
