Les sélecteurs CSS permettent de sélectionner le contenu que vous souhaitez styler. Les sélecteurs font partie du jeu de règles CSS. Les sélecteurs CSS sélectionnent les éléments HTML en fonction de leur identifiant, classe, type, attribut, etc.
Il existe plusieurs types de sélecteurs en CSS.
- Sélecteur d’élément CSS
- Sélecteur d’identifiant CSS
- Sélecteur de classe CSS
- Sélecteur universel CSS
- Sélecteur de groupe CSS
1) Sélecteur d’élément CSS
Le sélecteur d’élément sélectionne l’élément HTML par son nom.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>Ce style sera appliqué sur tout les paragraphes.</p>
<p id="para1">Moi aussi!</p>
<p>Et moi!</p>
</body>
</html>
Résultat :
2) Sélecteur d’identifiant CSS
Le sélecteur id sélectionne l’attribut id d’un élément HTML pour sélectionner un élément spécifique. Un identifiant est toujours unique dans la page. Il est donc choisi de sélectionner un seul élément.
Il est écrit avec le caractère de hachage (#), suivi de l’identifiant de l’élément.
Prenons un exemple avec l’id « para1 ».
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello w3tutoriels.com</p>
<p>Cette paragraphe ne sera pas affecté.</p>
</body>
</html>
Résultat :
Sélecteur de classe CSS
Le sélecteur de classe sélectionne les éléments HTML avec un attribut de classe spécifique. Il est utilisé avec un caractère de période. (symbole d’arrêt complet) suivi du nom de la classe.
Remarque: Un nom de classe ne doit pas être commencé avec un numéro.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Ce titre est de couleur blue et il est centré.</h1>
<p class="center">Cette paragraphe est bleu et centré.</p>
</body>
</html>
Résultat :
Sélecteur de classe CSS pour un élément spécifique
Si vous souhaitez spécifier qu’un seul élément HTML spécifique doit être affecté, vous devez utiliser le nom de l’élément avec le sélecteur de classe.
Voyons un exemple.
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">Ce titre n'est pas affecté</h1>
<p class="center">Cette paragraphe est bleu et elle est aligné.</p>
</body>
</html>
Résultat :
4) Sélecteur universel CSS
Le sélecteur universel est utilisé comme caractère générique. Il sélectionne tous les éléments des pages.
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Ceci est un titre</h2>
<p>Ce style sera affecté sur tout les paragraphes.</p>
<p id="para1">Moi aussi!</p>
<p>Et moi!</p>
</body>
</html>
Résultat :
5) Sélecteur de groupe CSS
Le sélecteur de regroupement permet de sélectionner tous les éléments ayant les mêmes définitions de style.
Le sélecteur de regroupement est utilisé pour minimiser le code. Des virgules sont utilisées pour séparer chaque sélecteur en groupe.
Voyons le code CSS sans sélecteur de groupe.
Résultat :
h1 {
text-align: center;
color: blue;
}
h2 {
text-align: center;
color: blue;
}
p {
text-align: center;
color: blue;
}
Résultat :
Comme vous pouvez le constater, vous devez définir des propriétés CSS pour tous les éléments. Il peut être regroupé de différentes manières:
h1,h2,p {
text-align: center;
color: blue;
}
Voyons l’exemple complet du sélecteur de groupe CSS.
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello w3tutoriels.com</h1>
<h2>Hello w3tutoriels.com (font petit)</h2>
<p>Ceci est une paragraphe.</p>
</body>
</html>
Résultat :
