Leçon 7 : L'identification et le regroupement d'éléments (class et id)
Parfois, on veut appliquer un style spécial à un élément ou à un groupe d'éléments particuliers. Dans cette leçon, nous étudierons
comment utiliser les attributs class et id pour définir les propriétés d'éléments sélectionnés.
Comment donner à un titre particulier une autre couleur que celle des autres titres du site Web ? Comment regrouper les liens en différentes catégories et donner à chacune un style spécial ? Ce sont les types de questions auxquelles nous répondrons ici.
Le regroupement d'éléments dans une classe
Supposons que nous ayons deux listes de liens vers les différents cépages utilisés pour des vins blancs et des vins rouges. Voici à quoi ressemble le code HTML :
<p>Cépages de vins blancs :</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>
<p>Cépages de vins rouges :</p>
<ul>
<li><a href="cs.htm">Cabernet Sauvignon</a></li>
<li><a href="me.htm">Merlot</a></li>
<li><a href="pn.htm">Pinot Noir</a></li>
</ul>
Nous voulons ensuite que les liens des vins blancs soient jaunes, que ceux des vins rouges soient rouges, et que les autres liens de la page Web restent bleus.
Pour y parvenir, nous répartissons les liens en deux catégories. On assigne une classe à chaque lien avec l'attribut class.
Essayons de définir quelques classes pour l'exemple précédent :
<p>Cépages de vins blancs :</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Cépages de vins rouges :</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
Par la suite, on peut définir des propriétés spéciales pour les liens appartenant respectivement aux catégories « whitewine » et « redwine ».
a {
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Comme affiché dans l'exemple, on peut définir les propriétés des éléments appartenant à une certaine classe en utilisant .le_nom_de_ladite_classe dans la feuille de style du document.
L'identification d'un élément avec id
Outre le regroupement d'éléments, on peut avoir besoin d'identifier un élément unique. Pour cela, on utilise l'attribut id.
L'attribut id a ceci de spécial qu'il ne peut pas y avoir deux éléments avec le même id dans le document.
Chaque id doit être unique. Dans le cas contraire, il faudrait utiliser l'attribut class à la place.
Voyons maintenant un exemple d'utilisation possible de id :
<h1>Chapitre 1</h1>
....
<h2>Chapitre 1.1</h2>
....
<h2>Chapitre 1.2</h2>
....
<h1>Chapitre 2</h1>
....
<h2>Chapitre 2.1</h2>
....
<h3>Chapitre 2.1.2</h3>
....
Il pourrait s'agir des titres d'un document partagé en chapitres ou en paragraphes. Il semble naturel d'assigner
un id à chaque chapitre comme ceci :
<h1 id="c1">Chapitre 1</h1>
....
<h2 id="c1-1">Chapitre 1.1</h2>
....
<h2 id="c1-2">Chapitre 1.2</h2>
....
<h1 id="c2">Chapitre 2</h1>
....
<h2 id="c2-1">Chapitre 2.1</h2>
....
<h3 id="c2-1-2">Chapitre 2.1.2</h3>
....
Disons que le titre du chapitre 1.2 doive apparaître en rouge. Avec CSS, cela donne :
#c1-2 {
color: red;
}
Comme affiché dans l'exemple précédent, on peut définir les propriétés d'un élément spécifique en utilisant #le_nom_dudit_id dans la feuille de style du document.
Résumé
Dans cette leçon, nous avons vu que l'on pouvait définir les propriétés d'éléments spécifiques à l'aide des sélecteurs
class et id.
Dans la leçon suivante, nous étudierons de plus près deux éléments HTML largement employés avec CSS :
<span> et <div>.