Sélecteurs class et id

A quoi servent les sélecteurs CSS class et id ? Tout simplement à définir des styles particuliers que l'on voudra reproduire de façon ponctuelle ou récurrente dans les pages (X)HTML. Une fois que la feuille de style de base n'a plus de secrets, il est temps de passer à la vitesse supérieure.

Les sélecteurs class et id sont incontournables et indispensables. Voyons leurs similitudes et leurs différences par deux exemples.

N'hésitez pas à nous faire part de votre avis sur cet article : 3 commentaires Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnel

I. Sélecteurs CSS class et id

Fonctionne avec :
  • Tous les navigateurs graphiques
Attributs utilisés:
  • background-color ;
  • float ;
  • width ;
  • margin ;
  • text-align.

I-A. Le sélecteur class

Premier exemple : les pages web sont souvent ponctuées d'ancres permettant de remonter en haut de page, et celles-ci sont souvent placées à droite de la page. Il va donc falloir déclarer un style spécial pour cette mise en forme spécifique, et le sélecteur class va nous y aider. A noter que dans la feuille de style, le nom du sélecteur class est toujours précédé d'un point.

Code CSS
Sélectionnez

.haut {
  text-align:right;
}
				
 
Sélectionnez

<p class="haut">
  <a href="#haut">Haut de page</a>
</p>
				

Et voilà, et cette mise en forme peut-être répétée autant de fois que besoin dans la page.

I-B. Sélecteur id

Le sélecteur id a presque la même fonction, à la différence importante qu'on ne peut l'utiliser qu'une seule fois dans la page, contrairement au sélecteur class. C'est pour cela qu'il est plutôt utilisé à la mise en page qu'à la mise en forme de caractères.

Deuxième exemple : construisons une section de page à deux colonnes. L'une des deux colonnes servira pour un menu de 100 pixels de large flottant à gauche, l'autre pour un contenu placé à 110 pixels du bord gauche (pour ne pas empièter sur le menu bien sûr). Cette fois, ce n'est pas d'un point qu'il faudra faire précéder le nom du sélecteur id, mais d'un #.

Source CSS
Sélectionnez

#menu {
  background-color:silver;
  width:100px;
  float:left;
}
#contenu {
  margin-left:110px;
}
				
Source (X)HTML
Sélectionnez

<h1 id="haut">Exemple des sélecteurs "class" et "id"</h1> 
<div id="menu">
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>
<div id="contenu">
  <p>
    Lorem ipsum dolor sit amet, 
    consectetuer adipiscing elit, 
    sed diam nonummy nibh euismod 
    tincidunt ut laoreet dolore 
    magna aliquam erat volutpat. 
    Ut wisi enim ad minim veniam, 
    quis nostrud exerci tation 
    ullamcorper suscipit lobortis 
    nisl ut aliquip ex ea commodo consequat. 
    Duis autem vel eum iriure dolor 
    in hendrerit in vulputate velit 
    esse molestie consequat, 
    vel illum dolore eu feugiat 
    nulla facilisis at vero eros 
    et accumsan et iusto odio 
    dignissim qui blandit praesent 
    luptatum zzril delenit augue duis 
    dolore te feugait nulla facilisi.
  </p> 
  <p class="haut">
    <a href="#haut">Haut de page</a>
  </p>
</div>
				

Il n'aura pas échappé à votre sagacité qu'un id non déclaré dans les styles est venu se glisser dans la balise de titre h1(id="haut"). C'est le deuxième effet id ! En effet, cet attribut peut être utilisé en JavaScript, et aussi servir d'ancre. Ainsi, le lien interne de haut de page y est rattaché directement. Cela explique aussi pourquoi on ne peut utiliser qu'un seul nom de id par page. S'il y avait deux id="haut" dans la page, où irait le lien ?! Hein ? Je vous le demande !

Tester l'exemple.

Liste de mes articles :
Principe des feuilles de style CSS - Commentez Donner une note à l'article (5)
Balises (X)HTML de base - 1 commentaire Donner une note à l'article (4.5)
Feuille de style CSS de base - Commentez Donner une note à l'article (3.5)
Mettre en forme un texte en CSS - Commentez Donner une note à l'article (4)
Gérer les marges en CSS - 5 commentaires Donner une note à l'article (4.5)
Résoudre les problèmes de marges en CSS - Commentez Donner une note à l'article (4)
Sélecteurs class et id - 3 commentaires Donner une note à l'article (5)
Mise en page full CSS - 4 commentaires Donner une note à l'article (4.5)
Bordures en CSS - 2 commentaires Donner une note à l'article (4.5)
Image de fond en CSS - 3 commentaires Donner une note à l'article (4.5)
Effets Rollover à l'aide de :hover - 2 commentaires Donner une note à l'article (4.5)
Aligner une image et du texte à l'aide de la propriété float - 1 commentaire Donner une note à l'article (4)
Listes à puces en image - 2 commentaires Donner une note à l'article (5)
Citations et retraits - Commentez Donner une note à l'article (4.5)
Concevez des boutons graphiques avec du CSS - 11 commentaires Donner une note à l'article (4.5)
Positionnez des images aux quatre coins d'une page web - 16 commentaires Donner une note à l'article (5)
Appliquez un effet de zoom sur une image avec les CSS - 1 commentaire Donner une note à l'article (4.5)
Zoomer une image façon thumbnail en CSS - 3 commentaires Donner une note à l'article (4.5)
Tableaux à bordures fines avec les CSS - 1 commentaire Donner une note à l'article (5)
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 01/07/2010 Pascale Lambert. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.