Sélecteurs de classe CSS

Dans le CSS, le sélecteur de classe est représenté par un point.

.center {text-align: center}

Dans cet exemple, tous les éléments HTML possédant la classe center sont centrés.

Dans le code HTML suivant, les éléments h1 et p ont tous deux la classe center. Cela signifie que les deux suivront les règles du sélecteur ".center".

<h1 class="center">
Ce titre sera aligné au centre
</h1>
<p class="center">
Ce paragraphe sera également aligné au centre.
</p>

Attention :Le premier caractère du nom de classe ne peut pas être un chiffre ! Il ne fonctionnera pas dans Mozilla ou Firefox.

Comme pour l'id, la classe peut également être utilisée comme sélecteur dérivé :

.fancy td {
	color: #f60;
	background: #666;
	}

Dans cet exemple, les cellules de tableau situées à l'intérieur de l'élément plus grand nommé fancy afficheront du texte orange sur un fond gris. (L'élément plus grand nommé fancy peut être un tableau ou un div).

Les éléments peuvent également être sélectionnés en fonction de leur classe :

td.fancy {
	color: #f60;
	background: #666;
	}

Dans l'exemple ci-dessus, les cellules de tableau avec le nom de classe fancy seront de l'orange avec un fond gris.

<td class="fancy">

Vous pouvez attribuer la classe fancy à n'importe quel élément de tableau aussi souvent que nécessaire. Les cellules marquées fancy seront de l'orange avec un fond gris. Les cellules qui n'ont pas été assignées à la classe fancy ne seront pas affectées par cette règle. Il y a aussi un point à noter, les paragraphes avec la classe fancy ne seront pas de l'orange avec un fond gris, bien sûr, tous les autres éléments marqués fancy ne seront pas affectés par cette règle. Cela est dû à la manière dont nous avons écrit cette règle, cet effet est limité aux cellules de tableau marquées fancy (c'est-à-dire en utilisant l'élément td pour sélectionner la classe fancy).

Contenu connexe

Si vous avez besoin d'apprendre davantage sur les sélecteurs de classe, lisez les tutoriels avancés de CodeW3C.com :Détails des sélecteurs de classe CSS.