2. Les sélecteurs CSS

Après avoir vu la syntaxe, attardons nous sur les sélecteurs. Nous avons vu comment sélectionner un élément HTML à l’aide de son nom de balise. Par exemple, l’exemple CSS suivant sélectionne toutes les balises <p> dans le fichier HTML.

p {
   color:purple;
}

Maintenant, peu importe s’il n’y a qu’une seule balise <p> dans le fichier HTML ou s’il y en a des centaines, ces règles CSS seront appliquées à tous les contenus des balises <p>.

Si vous avez envie de changer la couleur de chaque paragraphe (comme dans l’exemple qui va suivre), il va falloir utiliser des sélecteurs. Il en existe principalement 2 : les sélecteurs d’identifiant ( “id” ) et les sélecteurs de classe (“class”)

Les sélecteurs d’ID

Partons sur un document simple :

<!DOCTYPE html>
<html lang="fr">
 <head>
   <title> Test du CSS </title>
	 <link rel="stylesheet" href="style.css" type="text/css">
 </head>
 <body>
   <p>Voici un paragraphe rouge</p>
   <p>Voici un paragraphe bleu</p>
   <p>Voici un paragraphe vert</p>
 </body>
</html>

Il y a trois paragraphes mais aucune CSS ne leur est appliquée. Mais le but ici est d’attribuer des couleurs différentes à chaque paragraphe.

Comment faire ?

Nous devons sélectionner un paragraphe particulier et lui appliquer une couleur particulière.

Pour ce faire, on utilise un sélecteur d’ID (= identifiant)

Pour attribuer un identifiant à un sélecteur, rien de plus simple : il suffit d’utiliser un attribut html dans la balise que l’on veut cibler, l’attribut “id”.

💡 Pour info, si on veut suivre les conventions établies par le W3C, l’id donné à un élément doit être unique, on ne doit pas le réutiliser sur un autre sélecteur. Nous verrons qu’il existe un autre attribut qui peut être utilisé sur plusieurs sélecteurs.

Par exemple, nous allons attribuer 3 “id” différents sur nos 3 paragraphes en faisant ainsi :

<!DOCTYPE html>
<html lang="fr">
 <head>
   <title> Test du CSS </title>
   <link rel="stylesheet" href="style.css" type="text/css">
 </head>
 <body>
   <p id="rouge">Voici un paragraphe rouge</p>
   <p id="bleu">Voici un paragraphe bleu</p>
   <p id="vert">Voici un paragraphe vert</p>
 </body>
</html>
  • Le premier <p> se voit attribuer l’identifiant “rouge”
  • Le deuxième l’identifiant “bleu”
  • Le troisième l’identifiant “vert”

Maintenant, il va falloir faire référence à ces identifiants dans votre feuille de styles. Pour ce faire, on va devoir utiliser un caractère particulier, le hashtag #.

Allez dans votre document style.css, et ajouter ces lignes :

#rouge {
   color:red;
}

En faisant ainsi, vous pointez précisément la balise qui contient un attribut id “rouge”. Retournez sur votre page index.html, et rafraîchissez-la : le texte du premier paragraphe devrait être coloré en rouge désormais !

Pour le dire plus simplement :

  • L’attribut “id” présent sur une balise html peut être configuré en css grâce au symbole # qui porte le même nom.

Ajoutez ces autres sélecteurs dans votre feuille de styles :

#rouge {
   color:red;
}
#bleu {
   color:blue;
}
#vert {
   color:green;
}

Votre page html devrait désormais s’afficher ainsi dans votre navigateur :

Le sélecteur de classe

Nous l’avons vu précédemment, le problème avec le sélecteur “id”, c’est qu’il ne peut s’appliquer qu’à un seul élément html – si on veut suivre les règles du W3C.

En théorie, on ne peut donc pas trouver plusieurs <p id=”rouge”> dans le document html.

Comment faire donc si nous voulons appliquer un ensemble de règles à plusieurs paragraphes comme dans cet exemple ?

<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p>Voici un paragraphe rouge</p>
   <p>Voici un paragraphe rouge</p>
   <p>Voici un paragraphe rouge</p>
   <p>Voici un paragraphe rouge</p>
   <p>Voici un paragraphe bleu</p>
   <p>Voici un paragraphe vert</p>
</body>
</html>

Réponse : en utilisant le sélecteur de classe

Il fonctionne à peu près de la même manière que l’id, à ceci près qu’on le définit en utilisant un point (.) au lieu du hashtag (#) dans la feuille de style, et qu’on l’appelle en utilisant le mot “class” au lieu du mot “id” dans le document html.

Ce sélecteur fonctionne exactement de la même façon que le sélecteur d’id ; sa seule différence est la suivante :

  • On attribue une classe à un élément html en utilisant l’attribut “class”
  • Cet attribut “class” est pointé dans la feuille de style par un simple point “.”

Exemple concret :

Ajoutez cette règle dans votre feuille de styles :

.rouge {
   color:red;
}

Et modifiez votre document html comme ceci, en ajoutant l’attribut “class” et la valeur qui y correspond sur les paragraphes que vous souhaitez colorer en rouge :

<!DOCTYPE html>
<html lang="fr">
<head>
   <title> Test du CSS </title>
   <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
   <p class="rouge">Voici un paragraphe rouge</p>
   <p class="rouge">Voici un paragraphe rouge</p>
   <p class="rouge">Voici un paragraphe rouge</p>
   <p class="rouge">Voici un paragraphe rouge</p>
   <p>Voici un paragraphe sans style</p>
   <p>Voici un paragraphe sans style</p>
</body>
</html>

Rafraîchissez votre document html : les règles s’appliquent ainsi aux 3 paragraphes qui ont une classe nommée “rouge”, mais pas aux 2 autres.

Regrouper les sélecteurs

Enfin, sachez qu’il est possible de regrouper des sélecteurs qui sont censés avoir des règles  CSS communes dans un seul et même groupe pour éviter de surcharger la feuille de styles.

Ainsi, au lieu d’écrire

h1 {
   color:blue;
}
p {
   color:blue;
}
h2 {
   color:blue;
}

Vous pouvez tout simplement les lister en les espaçant d’une virgule comme ceci :

h1, p, h2 {
   color:blue;
}

Et voilà, c’est tout pour cette partie !

Prochaine étape : la mise en forme d’un texte plus complexe grâce au CSS.