Download WordPress Themes, Happy Birthday Wishes

CSS Sélecteur

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 :

CSS - sélecteur

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 :

CSS - identifiant sélecteur

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 :

CSS - classes

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 :

CSS - sélecteur spécifique

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 :

CSS - sélecteur universelle

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 :

CSS - exemple