Sélecteurs CSS


Table des matières

    Afficher la table des matières


Un sélecteur CSS sélectionne le ou les éléments HTML que vous envie de styliser.


Sélecteurs CSS

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 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é 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 d'identifiant CSS

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.

Exemple

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 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 du cours.

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;
}

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.

Exemple

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.

Exemple

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 CSS

Le sélecteur universel (*) sélectionne tous les HTML éléments sur la page.

Exemple

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 CSS

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.

Exemple

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>




Tous les sélecteurs simples CSS

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>