Attribut class

L'attribut class définit une ou plusieurs classes pour un élément (par élément, on entend une balise).

Cela se fait afin de pouvoir ensuite cibler via CSS un groupe d'éléments auxquels la même classe est attribuée, et leur appliquer des propriétés spécifiques (par exemple, changer la couleur du texte, la taille de la police, etc.).

Il existe également un attribut id qui, similairement à l'attribut class, permet de sélectionner des éléments sur une page HTML.

La différence entre l'attribut class et l'attribut id réside dans le fait que class sélectionne un groupe d'éléments (même s'il est attribué à un seul élément, on peut par la suite l'attribuer à un autre), tandis que id sélectionne un élément unique (il ne doit pas y avoir d'autre élément avec le même id sur la page web, sinon il y aura un conflit).

Comment décider s'il faut donner à un élément une classe ou un id ? On donne une classe aux éléments qui se répètent sur les pages du site (afin de ne pas avoir à écrire plusieurs fois le même code CSS). Même si actuellement cet élément est unique, mais que vous sentez que des éléments similaires pourraient apparaître par la suite - donnez-lui une classe. Si vous êtes certain que cet élément est unique - alors donnez-lui un id. Bien qu'actuellement, il y ait une tendance à donner une classe à tous les éléments, et à réserver l'id pour JavaScript, celle-ci n'est pas universellement acceptée.

On peut attribuer plusieurs classes à un élément ; dans ce cas, il faut les lister en les séparant par un espace.

Les noms de classes doivent être composés de lettres anglaises, de chiffres, sans espaces (l'espace sépare les classes les unes des autres ; à la place, on peut utiliser le tiret bas ou le trait d'union). Les classes ne doivent pas commencer par un chiffre (c'est possible en HTML5, mais ne fonctionnera pas dans les anciens navigateurs).

Il convient de donner aux classes des noms en anglais (et non en russe, simplement transcrits en lettres anglaises !). Les noms doivent être significatifs, reflétant l'essence de la classe.

Exemple

Appliquons la couleur rouge à tous les paragraphes de classe test :

<p class="test">Paragraphe avec la classe test.</p>
<p>Paragraphe de contrôle sans classe.</p>

.test {
	color: red;
}

Exemple . Plusieurs classes pour un élément

Ici, attribuons plusieurs classes au premier paragraphe - test1 et test2 (écrivons-les séparées par un espace). La classe test1 applique la couleur rouge au texte, et la classe test2 définit la taille de la police à 20px. Le deuxième paragraphe n'a que la classe test1 (ce paragraphe deviendra rouge), et le troisième paragraphe - la classe test2 (ce paragraphe aura une taille de police de 20px). Le premier paragraphe, qui possède deux classes, aura à la fois la couleur rouge et la taille de police de 20px :

<p class="test1 test2">Paragraphe avec deux classes test1 et test2.</p>
<p class="test1">Paragraphe avec la classe test1.</p>
<p class="test2">Paragraphe avec la classe test2.</p>
<p>Paragraphe de contrôle sans classes.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Voir aussi

l'attribut id,
qui définit des identifiants uniques pour les éléments