Sélecteur de classe

Bonjour,

Nous en sommes arrivés aux sélecteurs de classe, l’un des sujets les plus importants en CSS.

Nous connaissons le sélecteur de classe, car nous l’avons utilisé fréquemment jusqu’à présent.

Dans cette leçon, consolidons nos connaissances tout en découvrant ses avantages par rapport aux autres sélecteurs.

Commençons.

Nous utilisons le sélecteur point (.) pour définir un sélecteur de type classe. Ci-dessous, un sélecteur de classe nommé my-class auquel le style font-size: 10px; a été attribué.

.my-class {

font-size: 10px;

}

Nous pouvons également définir plusieurs styles pour un sélecteur de classe.

.my-class {

font-size: 10px;

}

Nous pouvons attribuer plusieurs classes au même élément. 

Dans l’exemple ci-dessous, deux sélecteurs de classe nommés el1 et el2 sont définis.

Deux classes ou plus peuvent être ajoutées à l’attribut class de l’élément créé avec la balise p, en les séparant par un espace.

Vous pouvez constater dans la section Aperçu que les styles des deux classes s’appliquent simultanément à l’élément.

Pourquoi choisir le sélecteur de classe plutôt que le sélecteur de balise ou d’ID ?

Lorsque nous utilisons le sélecteur de balise, cela peut entraîner des résultats indésirables, car il affecte tous les éléments créés avec cette balise. Nous utilisons donc généralement ces balises lorsqu’il existe une caractéristique commune que tous les éléments doivent avoir.

Par exemple, si nous voulons que la famille de polices de chaque élément soit « Lato », nous créons une définition comme suit.

Nous pourrions créer une définition spécifique à un élément avec le sélecteur d’ID.

Cependant, puisque toutes nos définitions de style ne s’appliquaient qu’à un seul élément, nous devions réécrire le code pour tout autre élément auquel nous voulions appliquer les mêmes propriétés.

En effet, un document HTML ne peut contenir qu’un seul élément avec le même ID.

Apprenons maintenant le concept de spécificité CSS.

Créons à nouveau un problème pour mieux comprendre le sujet, puis nous découvrirons ce concept en le résolvant.

Dans l’exemple ci-dessous,

une définition de style a été créée pour la balise p.

Une définition de style est créée avec un sélecteur de classe nommé .first.

Les deux sélecteurs ciblent le même élément dans notre document HTML.

Les deux sélecteurs définissent des styles qui remplacent la même propriété de couleur. Il y aura donc un conflit.

En regardant l’exemple, nous pourrions penser que la couleur sera rouge, selon ce que nous avons appris précédemment.

En effet, le concept de cascade nous indique que le dernier élément dans l’ordre du code l’emportera.

Cependant, il existe une petite nuance. Si leur spécificité est identique, c’est le dernier code arrivé qui l’emporte.

Il s’agit d’une évaluation qui montre l’importance de la spécificité du sélecteur sur l’élément ou les éléments concernés.

Indépendamment de sa position dans le code, la règle ayant le niveau de spécificité le plus élevé sera évaluée par le navigateur.

Le sélecteur de classe constitue une définition plus spécifique que le sélecteur d’élément. Son niveau de spécificité est donc plus élevé.

Déterminer quel sélecteur est le plus spécifique est en réalité très simple.

Comme un seul ID est attribué à un élément et qu’il n’y en a qu’un seul sur la page web, nous nous attendons à ce qu’il soit le sélecteur prioritaire.

Les sélecteurs de classe, quant à eux, peuvent être évalués comme plus spécifiques que les sélecteurs de balise, car ils ciblent un groupe plus spécifique que la balise.

Dans l’exemple ci-dessous, nous verrons que le sélecteur d’ID l’emporte en ciblant le même élément avec trois sélecteurs différents.

Vous pouvez accéder au calculateur de spécificité en ligne depuis ce lien.

Dois-je donc effectuer ces calculs tout le temps ?

Bien sûr que non. Aucun conflit ne se produira si nous écrivons notre code conformément aux normes.

Vous n’avez donc pas besoin d’effectuer des calculs mathématiques en permanence, mais en cas de problème, ces informations peuvent vous être nécessaires pour le résoudre.

Félicitations. 🥳🥳🥳

Vous avez terminé la leçon sur le sélecteur de classe et la spécificité CSS.

Dans la prochaine section, nous découvrirons les types de sélecteurs.

Vous pouvez cliquer pour continuer dans la prochaine section.