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 :
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
de la page seront alignés au centre, avec une couleur de texte rouge :
p {
aligner le texte : centrer ;
La couleur rouge;
}
Essayez-le vous-même »
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 {
aligner le texte : centrer ;
La couleur rouge;
}
Essayez-le vous-même »
Note: 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 :
.centre {
aligner le texte : centrer ;
La couleur rouge;
}
Essayez-le vous-même »
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
avec class=”center” seront rouges et centrés :
p.centre {
aligner le texte : centrer ;
La couleur rouge;
}
Essayez-le vous-même »
Les éléments HTML peuvent également faire référence à plusieurs classes.
Exemple
Dans cet exemple, l’élément
sera stylisé selon class=”center” et class=”large”:
Ce paragraphe fait référence à deux classes.
Essayez-le vous-même »
Note: 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 :
* {
aligner le texte : centrer ;
Couleur bleue;
}
Essayez-le vous-même »
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 {
aligner le texte : centrer ;
La couleur rouge;
}
h2 {
aligner le texte : centrer ;
La couleur rouge;
}
p {
aligner le texte : centrer ;
La couleur rouge;
}
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 {
aligner le texte : centrer ;
La couleur rouge;
}
Essayez-le vous-même »
| Tous les sélecteurs simples CSS | Sélecteur | Exemple |
|---|---|---|
| Exemple de description# | identifiant | #prénom |
| Sélectionne l’élément avec id=”firstname”. | classe | .intro |
| Sélectionne tous les éléments avec class=”intro” | élément.classe | p.intro |
| Sélectionne uniquement les éléments
avec class=”intro” |
* | * |
| Sélectionne tous les éléments | élément | p |
| Sélectionne tous les éléments | élément,élément,.. | div, p |
Sélectionne tous les éléments
#Sélecteurs #CSS