CSS fournit plusieurs façons de modifier l'apparence d'un élément. Les sélecteurs CSS en font partie, les sélecteurs nous permettent de cibler un élément HTML et de spécifier un style de notre choix sur n'importe quel élément HTML.

Dans CSS, il y a cinq catégories de sélecteurs I.e. Simple, combinateur, pseudo-classe, pseudo-élément et sélecteur d'attribut. Cette rédaction présente un aperçu détaillé de l'un des sélecteurs simples I.e. sélecteur de classe et il discutera des terminologies suivantes liées au sélecteur de classes:

• Qu'est-ce qu'un sélecteur de classe
• Syntaxe de base du sélecteur de classes
• Comment utiliser le sélecteur de classes
• Comment utiliser le sélecteur de classe pour certains éléments HTML spécifiques

Commençons cette discussion avec la définition de base du sélecteur de classe:

Sélecteur de classe dans CSS

Un sélecteur de classe cible l'élément avec des noms de classe spécifiques. La syntaxe suivante vous donnera plus de clarté sur le sélecteur de classe.

Syntaxe

La syntaxe de base commence par un point "."Suivi du nom de classe qui représente qu'il s'agit d'un sélecteur de classe.

Dans la figure ci-dessus "."Montre qu'il s'agit d'un sélecteur de classe CSS," Style "représente le nom de la classe.

Comment utiliser le sélecteur de classe CSS

Le sélecteur de classe CSS peut être utilisé pour définir le style de certains éléments HTML spécifiques.

Exemple

Jetons un coup d'œil au code donné ci-dessous, il utilise le sélecteur de classe pour styliser certains éléments HTML spécifiques.

Sélecteur de classe CSS

Premier paragraphe

La deuxième paragraphe

Le code ci-dessus utilise deux sélecteurs de classe. Le

et d'abord

L'élément utilise la même classe afin que le même style soit implémenté, tandis que le second

L'élément sera stylé différemment:

Comment utiliser le sélecteur de classe CSS pour des éléments HTML spécifiques

Nous pouvons utiliser le sélecteur de classe CSS afin d'affecter des éléments HTML spécifiques. À cette fin, nous devons spécifier le nom de l'élément avant le point «.», Comme indiqué dans la figure suivante:

La figure ci-dessus décrit qui sélectionne tous les

Éléments ayant le nom de classe «style» et définissez la couleur d'arrière-plan comme bleu.

Exemple

Dans cet exemple, la classe Style1 est spécifiée pour

et

éléments. Cependant, seulement

Les éléments ayant l'attribut de classe «style1» peuvent accéder aux propriétés de style de Style1 et du

L'élément restera non style.

Sélecteur de classe CSS

Premier paragraphe

La deuxième paragraphe

Sortir

Comment implémenter plusieurs styles sur l'élément HTML

Comme un élément HTML peut avoir plusieurs noms de classe dans son attribut de classe afin que nous puissions appliquer un style différent en fonction des noms de classe.

Exemple

Dans le code ci-dessous, le premier paragraphe implémentera les propriétés des deux classes de style.

Sélecteur de classe CSS

Premier paragraphe

La deuxième paragraphe

Le morceau de code ci-dessus générera la sortie suivante:

La sortie vérifie que le premier paragraphe utilise les propriétés des deux classes «style» et «style1».

Conclusion

Un sélecteur de classe sélectionne l'élément HTML pour le style dans CSS en utilisant son nom de classe et il commence par un point ".»Suivi du nom de la classe. Cet article présente un aperçu complet et un concept de base de sélecteurs de classe CSS, comment utiliser des sélecteurs de classe, comment utiliser un sélecteur de classe pour certains éléments HTML spécifiques à l'aide d'exemples.