Sélecteurs CSS

CSS (acronyme de la feuille de style Cascading) propose quelques modèles qui ciblent les éléments HTML et implémentent un style de notre choix connu sous le nom Sélecteurs CSS. Ces sélecteurs trouvent les éléments HTML basés sur ID, classe, type, etc.

Vous vous demandez comment fonctionnent les sélecteurs CSS? Pas de soucis! Cet article montrera une compréhension détaillée des sélecteurs CSS avec des exemples. Commençons par la syntaxe d'abord:

Syntaxe

La syntaxe pour écrire un sélecteur CSS est indiquée dans l'extrait ci-dessous:

Ici «P» est le sélecteur qui convertira la couleur du paragraphe en vert.

Types de sélecteurs CSS

CSS propose différents types de sélecteurs chaque type possède des fonctionnalités différentes. Cet article couvrira les types suivants:

• sélecteur d'élément
• sélecteur de classe
• sélecteur d'identité
• sélecteur de regroupement
• sélecteur universel

Sélecteur d'élément

Dans CSS, le sélecteur d'élément est utilisé pour cibler les éléments HTML en fonction de leur nom.

Par exemple, le code suivant implémentera la couleur d'arrière-plan noir avec une couleur de texte vert à tous les paragraphes à l'aide du sélecteur d'éléments:

Sélecteurs

Développement du frontend

Développement backend

La sortie en dessous montrera le fonctionnement du sélecteur d'éléments CSS:

Sélecteur de classe

Le sélecteur de classe CSS est utilisé pour cibler les éléments HTML avec un nom de classe spécifique. La syntaxe du sélecteur de classe comprend une période (.) suivi du nom de classe.

.className css-property: value

Dans la syntaxe ci-dessus, «ClassName» est un sélecteur de classe.

Voyons un exemple qui ciblera l'en-tête et les éléments de paragraphe utilisant le sélecteur de classe comme indiqué dans le code ci-dessous:

Sélecteurs

Développement du frontend

Développement backend

Dans cet exemple ".style »est un sélecteur de classe qui spécifie certaines propriétés. Dans la section du corps

, et les deux

Les éléments ont le nom de classe «style».

L'extrait ci-dessous affichera la sortie de l'extrait de code ci-dessus:

sélecteur d'identité

Dans CSS, le sélecteur d'identité cible les éléments HTML basés sur l'attribut ID. Le signe de hachage (#) suivi de l'ID de l'élément est utilisé pour le sélecteur d'identité.

Voyons un exemple qui implémentera le style spécifié sur l'élément HTML avec id = «style» comme indiqué ci-dessous:

Sélecteurs

Développement du frontend

Développement backend

Le sélecteur d'identité implémenté sur le

L'élément fournira la sortie suivante:

Maintenant, vous devez penser quelle est la différence entre le sélecteur d'identité et le sélecteur de classe?

L'ID est un identifiant unique qui signifie qu'une fois que nous avons utilisé l'ID pour un élément, le même ID ne peut pas être utilisé ailleurs dans le même document. Si nous utilisons le même ID deux fois dans un document, le CSS appliquera le style au dernier. Alors que les cours sont de grands classificateurs, ils ne sont pas de nature unique.

Sélecteur de regroupement

Le sélecteur de regroupement cible plusieurs éléments avec le même style. Le sélecteur de regroupement utilisé ',' entre plusieurs sélecteurs.

Voyons un exemple qui implémentera le même style aux multiples éléments que dans l'extrait suivant:

Sélecteurs

Développement du frontend

Développement backend

C'est un pied de page

La sortie suivante vérifiera que le sélecteur de regroupement a appliqué le même style à

et éléments:

Sélecteur universel

Le sélecteur universel implémente le style à tous les éléments du document. Un signe «*» est utilisé pour implémenter le sélecteur universel. Par exemple, le code suivant appliquera le style donné sur tous les éléments HTML:

Sélecteurs

Développement du frontend

Développement backend

C'est un pied de page

Le code ci-dessus implémentera le document sur l'ensemble et, par conséquent, nous obtiendrons la sortie suivante:

Conclusion

Les sélecteurs CSS trouvent / ciblent les éléments HTML et implémentez certaines propriétés de style. Il existe de nombreux types de sélecteurs CSS, cet article en couvrait quelques-uns comme le sélecteur d'éléments et le sélecteur de classe basé sur le nom de l'élément et le nom de la classe de l'élément respectivement. Chaque type remplit différentes fonctionnalités comme le sélecteur d'ID implémente une action en fonction de l'ID de l'élément, du groupe de sélecteur cible les éléments multiples, le sélecteur universel affecte l'ensemble du document, etc.