Classes d'éléments en CSS

Dans les leçons précédentes, nous sélectionnions les éléments de la page par le nom de la balise, en appliquant des styles, par exemple, simultanément à tous les paragraphes. Sur une page, il peut cependant y avoir des paragraphes de types différents, auxquels il faut appliquer des styles différents. Pour résoudre ce problème, on peut attribuer les différents paragraphes à différentes classes CSS.

Pour attribuer une balise à une classe, il faut lui écrire l'attribut class, et dans celui-ci - le nom de classe que vous avez inventé, composé de lettres, de chiffres, de tirets bas et de traits d'union.

Regardons un exemple. Créons des paragraphes avec deux types de classes - eee et zzz :

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

Maintenant, adressons-nous en CSS aux paragraphes avec les différentes classes et appliquons-leur quelques styles. Par exemple, colorons en rouge les paragraphes avec la classe zzz, et les paragraphes avec la classe eee - en vert.

Pour cela, dans le fichier CSS, il faut sélectionner nos classes. La sélection a la syntaxe suivante : commencez par le point, puis écrivez le nom de classe que nous avons inventé. C'est-à-dire que pour sélectionner la classe eee, il faut écrire .eee, et pour la classe zzz - écrire .zzz.

Alors, faisons ce qui est décrit. Ajoutons à notre HTML aussi les styles CSS pour les classes que nous avons introduites :

.eee {
	color: green;
}
.zzz {
	color: red;
}

Si nous exécutons notre code, le résultat sera le suivant :

Voici le code suivant :

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

Coloriez en rouge les éléments avec la classe odd et en vert - les éléments avec la classe eve.

Voici le code suivant :

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Coloriez en rouge tous les éléments avec la classe eee.

Expliquez pourquoi, dans la tâche précédente, les balises li se colorent en rouge, bien que la classe, définissant la couleur, soit attribuée à la balise ul.