Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Sélecteurs CSS class et id

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

.haut {
text-align:right;
}

Code (X)HTML

Pour appeler ce style dans la page html, on indique simplement class="haut" à l'intérieur de la balise voulue.

<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.

Avec des noms spécifiques, class peut aussi servir à apporter plus de sémantique au code. Ce sont les microformats. On pourra ainsi spécifier, par exemple, la date de publication d'un article ou tous les éléments de la carte de visite d'une personne.
Pour plus de détails, je vous invite à lire le tutoriel "microformats" d'Alsacréations.

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 #.

Code CSS

#menu {
background-color:silver;
width:100px;
float:left;
}
#contenu {
margin-left:110px;
}

Code (X)HTML

Dans le code html, il faudra donc cette fois indiquer un id (id="menu" et id="contenu") à la place de la syntaxe class.

<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

Haut