Un sélecteur CSS sélectionne le ou les éléments HTML que vous envie de styliser.
Les sélecteurs CSS sont utilisés pour « trouver » (ou sélectionner) les éléments HTML que vous envie de styliser.
Nous pouvons diviser les sélecteurs CSS en cinq catégories :
Sélecteurs simples (sélectionner les éléments en fonction du nom, de l'identifiant, de la classe)
Sélecteurs de combinateur (sélectionnez éléments basés sur une relation spécifique entre eux)
Sélecteurs de pseudo-classe (sélectionnent des éléments en fonction d'un certain état)
Sélecteurs de pseudo-éléments (sélectionnez et styliser une partie d'un élément)
Sélecteurs d'attributs (sélectionner des éléments en fonction de un attribut ou une valeur d'attribut)
Cette page expliquera les sélecteurs CSS les plus élémentaires.
Le sélecteur d'éléments sélectionne les éléments HTML en fonction du nom de l'élément.
Ici, tous les éléments <p> de la page seront aligné au centre, avec une couleur de texte rouge :
p
{
text-align: center;
color: red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Le sélecteur 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 au sein d'une page, le sélecteur d'identifiant est donc habitué sélectionnez 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.
La règle CSS ci-dessous sera appliquée à l'élément HTML avec id="para1" :
#para1
{
text-align: center;
color: red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Remarque : Un nom d'identifiant ne peut pas commencer par un chiffre !
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 du cours.
Dans cet exemple, tous les éléments HTML avec class="center" seront rouges et alignés au centre :
.center {
text-align: center;
color: red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
Vous pouvez également spécifier que seuls des éléments HTML spécifiques doivent être affectés par une classe.
Dans cet exemple, seuls les éléments <p> avec class="center" seront rouge et centré :
p.center {
text-align: center;
color: red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
Éléments HTML peut également faire référence à plus d’une classe.
Dans cet exemple, l'élément <p> sera stylé selon class="center" et à class="large":
<p class="center large">This paragraph refers to two classes.</p>
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Remarque : Un nom de classe ne peut pas commencer par un chiffre !
Le sélecteur universel (*) sélectionne tous les HTML éléments sur la page.
La règle CSS ci-dessous affectera chaque élément HTML de la page :
*
{
text-align: center;
color: blue;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Le sélecteur de regroupement sélectionne tous les éléments HTML avec le même style définitions.
Regardez le code CSS suivant (les éléments h1, h2 et p ont le même 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 regrouper des sélecteurs, séparez chaque sélecteur par une virgule.
Dans cet exemple, nous avons regroupé les sélecteurs du code ci-dessus :
h1, h2, p
{
text-align: center;
color: red;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Sélecteur :
#id
Exemple :
#firstname
Exemple de description : Sélectionne l'élément avec id="firstname"
Sélecteur :
.class
Exemple :
.intro
Exemple de description : Sélectionne tous les éléments avec class="intro"
Sélecteur :
element.class
Exemple :
p.intro
Exemple de description : Sélectionne uniquement les éléments <p> avec class="intro"
Sélecteur :
*
Exemple :
*
Exemple de description : Sélectionne tous les éléments
Sélecteur :
element
Exemple :
p
Exemple de description : Sélectionne tous les éléments <p>
Sélecteur :
element,element,..
Exemple :
div, p
Exemple de description : Sélectionne tous les éléments <div> et tous les éléments <p>