CSS id et classe
Dans notre chapitre précédent, nous avons appris les sélecteurs. Nous parlerons maintenant des sélecteurs id et class, fréquemment utilisés pour styliser les éléments des pages web.
Sélecteur id CSS
Un sélecteur d'ID est un identifiant unique de l'élément HTML auquel un style particulier doit être appliqué. Il n'est utilisé que lorsqu'un seul élément HTML de la page web doit avoir un style spécifique.
Dans les feuilles de style internes et externes, nous utilisons un dièse (#) pour un sélecteur id.
Exemple de sélecteur d'ID :
Sélecteur d'ID CSS pour un élément HTML
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>The first paragraph.</p>
<p id="blue">The second paragraph.</p>
<p>The third paragraph.</p>
</body>
</html>Comme vous pouvez le voir, nous avons attribué blue comme sélecteur id au deuxième paragraphe (id="blue"), et déclaré son style à l'aide de la propriété color — #blue {color: #1c87c9;} dans la section <head>. Cela signifie que l'élément HTML avec le sélecteur id blue s'affichera en #1c87c9.
Vérifiez ce code dans notre éditeur HTML en ligne pour constater que la couleur du deuxième paragraphe est #1c87c9.
Sélecteur de classe CSS
Un sélecteur de classe est utilisé lorsque le même style doit être appliqué à plusieurs éléments HTML sur la même page web.
Dans les feuilles de style internes et externes, nous utilisons un point (.) pour un sélecteur de classe.
Exemple de sélecteur de classe :
Exemple de sélecteur de classe CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">This is some heading.</h2>
<p>The second paragraph.</p>
<p class="blue">The third paragraph.</p>
</body>
</html>Dans notre exemple, un sélecteur de classe est utilisé deux fois, dans l'en-tête et le paragraphe.
Comme vous pouvez le voir, nous avons attribué blue comme sélecteur de classe (class="blue"), et déclaré son style à l'aide de la propriété color — .blue {color: #1c87c9;} dans la section <head>. Cela signifie que les éléments ayant le sélecteur de classe blue s'afficheront en #1c87c9.
Dans notre exemple, le titre et le troisième paragraphe sont #1c87c9. Vérifiez-le dans notre éditeur HTML en ligne.
Différence entre ID et classe
La différence entre les ID et les classes est que le premier est unique, tandis que le second ne l'est pas. Cela signifie que chaque élément ne peut avoir qu'un seul ID, et qu'une page ne peut contenir qu'un seul élément avec cet ID. L'utilisation du même ID sur plusieurs éléments empêchera le code de passer la validation. En revanche, comme les classes ne sont pas uniques, la même classe peut être utilisée sur plusieurs éléments, et inversement, vous pouvez utiliser plusieurs classes sur un même élément.
Pratique
Quelle est la principale différence entre l'ID CSS et la classe CSS ?