CSS est tout au sujet du style des pages Web, des sites Web, des documents HTML, etc. Par conséquent, il offre de nombreux outils de style comme les sélecteurs, les propriétés CSS, etc. Les sélecteurs sont le composant initial des règles CSS, les règles qui ciblent certains éléments HTML et le style selon certaines propriétés CSS spécifiques.

Dans CSS, les sélecteurs sont classés en cinq catégories I.e. Sélectionneurs de base, sélecteurs combinatoires, sélecteurs de pseudo-classe et sélecteurs d'attribut. La catégorie de base se compose d'un sélecteur d'éléments, d'un sélecteur de classe, d'un sélecteur d'identité, d'un sélecteur universel et d'un sélecteur de regroupement. Vous pouvez en savoir plus sur les sélecteurs de base dans nos sélecteurs CSS tutoriels.

Cet article expliquera les terminologies suivantes:

• Qu'est-ce qu'un sélecteur de regroupement dans CSS?
• Syntaxe de base du sélecteur de regroupement.
• Comment regrouper plusieurs éléments HTML à l'aide d'un sélecteur de groupe.

Commençons par la compréhension de base du sélecteur de regroupement:

Qu'est-ce qu'un sélecteur de regroupement dans CSS

Le sélecteur de regroupement cible les multiples éléments HTML et les styles simultanément. Il concise le code et réduit le morceau d'effort supplémentaire. Lors de la sélection / du regroupement de plus d'un élément HTML, nous devons séparer chaque élément HTML avec une virgule.

Syntaxe

Jetons un coup d'œil à l'extrait suivant pour comprendre la syntaxe du sélecteur de regroupement:

Dans la figure ci-dessus, P, H2, H3 et le pied de page sont des éléments HTML regroupés pour être stylisé.

Voyons un pas plus loin pour comprendre le concept de groupement sélecteur à l'aide d'un exemple:

Comment regrouper plusieurs éléments HTML à l'aide d'un sélecteur de groupe

Jetons un coup d'œil à l'exemple ci-dessous pour comprendre comment implémenter un style unique sur un groupe de différents éléments HTML:

Exemple Cet exemple a différents éléments HTML I.e.

,

, et

. Nous devons styliser tous ces éléments dans le style de police italique, avec la couleur du fond du bleu royal.

Html

linuxhint.com

Salut! Bienvenue à Linuxhint.com

Sélecteur de regroupement

Ceci est un exemple de sélecteur de regroupement

CSS

H1, H2, P
Color en arrière-plan: RoyalBlue;
Style de police: italique;

Le code donné ci-dessus a regroupé trois éléments, implémentez le même style sur tous les éléments et, par conséquent, nous obtiendrons la sortie suivante:

Il vérifie que tous les éléments implémentent le même style et que le sélecteur de groupement fonctionne correctement.

Conclusion

Pour implémenter un sélecteur de regroupement, tout ce que vous avez à faire est simplement d'écrire tous les noms de l'élément que vous souhaitez styliser et d'ajouter une virgule entre chaque élément. De cette façon, le style spécifié sera implémenté à chaque élément ciblé simultanément. Cette écriture couvre tous les aspects du regroupement des sélecteurs, à partir de ce qu'est le sélecteur de groupe et comment l'utiliser.