Le nombre d'éléments disponibles en XHTML est assez restreint. Ainsi bien que les feuilles de style pemettent de définir la présentation de chaque élément, le nombre de mises en page possibles est limité par le peu d'éléments distincts disponibles. Les opérateurs d'imbrication de filialité et d'adjacence entre éléments augmentent certes les possibilités d'affichage, mais, réaliser d'artificielles imbrications à des seules fins de présentation va à l'encontre de l'esprit du XHTML conçu pour structurer un document et en restituer la sémantique.
Pour étendre les possibilités de présentation, l'attribut universel "class" a été introduit. Ainsi il est possible de doter un élément d'un attribut "class" qui peut prendre toute valeur souhaitée par le concepteur.
Supposons que l'on souhaite mettre certains paragraphes importants en exergue. Il suffit d'associer un attribut "class" aux paragraphes concernés.
<p> Un paragraphe normal </p>
<p class="important"> Un paragraphe important</p>
<p> Un autre paragraphe normal</p>
et de définir une règle CSS qui s'applique aux paragraphes possédant un attribut "class" ayant pour valeur " important" de la façon suivante :
p.important
{pour obtenir l'affichage souhaité :
Un paragraphe normal
Un paragraphe important
Un autre paragraphe normal
*.nom_de_classe peut se noter .nom_classe et s'applique dès lors à tout élément doté d'un attribut class="nom_classe".
Il est possible d'attribuer plusieurs valeurs à l'attribut classe comme dans le code suivant :
<p class="remarque important"> Une remarque importante</p>
Avec la défnition précédente du style important on obtient le même résultat :
Un paragraphe important
Plus précisement le sélecteur nom_elt.nom_classe sélectionne tous les éléments de nom nom_elt dont l'une des valeurs de l'attribut "class" est nom_classe.
Supposons à présent le code suivant :
<p> Un paragraphe normal </p>
<p class="important"> Un paragraphe important</p>
<p class="remarque"> Une remarque</p>
<p class="remarque important"> Une remarque importante</p>
et les deux règles suivantes :
p.important
{p.remarque
{Affichera :
Un paragraphe normal
Un paragraphe important
Une remarque
Une remarque importante
Ainsi on constate que le paragraphe doté de l'attribut class="remarque important", est mis en forme selon la règle p.remarque (italique) mais également selon la règle p.important (orange). La remarque importante possède une caractéristique supplémentaire : le soulignement, qui pourtant ne figure ni dans la définition du style important, ni dans celle du style remarque.
Cet effet est obtenu par une règle supplémentaire qui ne s'applique qu'aux paragraphes ayant un attribut class dont la liste de valeurs contient "important" et "remarque" dont voici la définition :
p.important.remarque
{La syntaxe générale d'un sélecteur de classe est donc la suivante :
sélecteur de classe
nom_elt.class1.class2......classN désigne tous les élements nom_elt dont l'attribut class a pour valeur une liste dans laquelle figurent "class1", "class2", ... "classN".
L'attribut universel id permet d'identifier un élément de façon unique. Une même valeur d'attribut id ne peut figurer qu'une seule fois sur une page. Plusieurs éléments peuvent être doté d'un attribut id, mais toutes leurs valeurs doivent être distinctes. Cet attribut est utile pour désigner un élément dans un script par exemple, mais également pour lui appliquer un style CSS spécifique.
Le sélecteur de l'élément nom_elt doté de l'attribut id="identifiant" se note ainsi
nom_elt#identifiant
{Comme seul un élément peut posséder un attribut id="identifiant" dans la page, il est inutile de préciser nom_elt sauf si différents élements sur des pages distinctes sont dotés du même identifiant.
#identifiant
{
Copyright Gabriel Braun 2007