CSS Sélecteurs
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électionnent des éléments en fonction du nom, de l'id ou 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électionnent et stylisent une partie d'un élément)
- Sélecteurs d'attributs (sélectionnent 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é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 centrés, avec une couleur de texte rouge :
p {
text-align: center;
color: red;
} Le sélecteur id CSS
Le sélecteur 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 id est utilisé pour sélectionner un élément unique !
Pour sélectionner un élément avec un id spécifique, écrivez un caractère dièse (#), suivi de l'id 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'id ne peut pas commencer par un chiffre !
Le sélecteur de classe CSS
Le sélecteur de classe sélectionne les éléments HTML ayant 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 centrés :
.center {
text-align: center;
color: red;
} Vous pouvez également spécifier que seuls certains éléments HTML 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 appartenir à plusieurs classes.
Exemple
Dans cet exemple, l'élément <p> sera stylisé selon class="center" et class="large" :
<p class="center large">Ce paragraphe fait référence à deux 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 ayant 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 est 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;
} Tous les sélecteurs simples CSS
| Sélecteur | Exemple | Description de l'exemple |
|---|---|---|
| # id | #firstname | Sélectionne l'élément avec id="firstname" |
| . class | .intro | Sélectionne tous les éléments avec class="intro" |
| * | * | Sélectionne tous les éléments |
| élément | p | Sélectionne tous les éléments <p> |
| élément,élément,.. | div, p | Sélectionne tous les éléments <div> et tous les éléments <p> |