Pseudo-classes dans CSS | Expliqué

Styler les éléments HTML sur la base de l'état dans lequel ils se trouvent peut être une tâche intéressante qui peut améliorer l'apparence globale et l'expérience utilisateur d'un site Web. CSS fournit certaines classes pour cette tâche, qui sont appelées pseudo-classes. Ce message est conçu pour éclairer les pseudo-classes et leur utilisation. Avant de passer à notre sujet principal, jetez un œil au contenu que vous passerez dans cet article.

1. Que sont les pseudo-classes
2. : classe de liaison
3. : classe visitée
4. : classe de volant
5. : classe active
6. : Classe de mise au point
7. : Classe First-Child
8. : classe Lang

Commençons.

Que sont les pseudo-classes

Les pseudo-classes de CSS décrivent un état unique d'un élément HTML et basé sur ces états d'effets spéciaux peuvent être ajoutés aux éléments en utilisant un sélecteur CSS avec ces classes.

Syntaxe

sélecteur: pseudo-classe

valeur de la propriété;

Il existe diverses pseudo-classes dans CSS, cependant, nous allons en discuter de celles importantes dans cet article.

: classe de liaison

Cette classe est utilisée pour styliser un lien qui n'est pas encore visité.

Exemple

Supposons que vous souhaitiez ajouter un lien à votre site Web et lui donner un certain style lorsqu'il n'est pas encore visité par l'utilisateur. Suivez le code ci-dessous.

Indice de linux

Dans le code ci-dessus, nous avons fourni un lien vers l'attribut HREF de la balise d'ancrage, et en utilisant la classe: lien, nous lui donnons la couleur verte lorsqu'elle est dans son état non visité.

Sortir

Le lien a été stylé avec succès en utilisant la classe: lien.

: classe visitée

Cette classe est utilisée pour styliser un lien que l'utilisateur a visité.

Exemple

L'exemple ci-dessous montre le fonctionnement de la classe Visite Suivre l'exemple ci-dessous.

Indice de linux

Ici, nous attribuons la couleur verte à l'état visité du lien. Cela signifie que lorsque vous ouvrez le lien, la couleur changera en vert.

Sortir

Avant de visiter le lien.

Lorsque vous visitez le lien.

L'état visité du lien a été conçu en utilisant la classe Visitée.

: classe de volant

Cette classe est utilisée pour coiffer un élément lorsqu'un curseur de souris est amené dessus.

Exemple

Supposons que vous souhaitiez mettre en évidence un élément chaque fois que l'utilisateur amène la souris sur cet élément particulier.

Amenez la souris sur moi

Dans le code ci-dessus, nous avons créé un

élément et a utilisé la classe: Hover pour lui donner une couleur jaune. Maintenant, chaque fois que vous apportez votre souris sur l'élément, la couleur changera en jaune.

Sortir

La classe: Hover fonctionne correctement.

: classe active

Cette classe est utilisée pour styliser un élément lorsqu'il est actif.

Exemple

Supposons que vous souhaitiez un lien pour changer sa couleur lorsqu'il est cliqué.

Indice de linux

Maintenant, lorsque l'utilisateur cliquera sur le lien, à ce moment-là, la couleur du lien changera en rose.

Sortir

Avant de cliquer sur le lien.

Lorsque le lien est cliqué.

L'état actif du lien a été stylé avec succès.

: Classe de mise au point

Cette classe est utilisée pour styliser un élément lorsqu'il est sous Focus.

Exemple

Stytchons un champ de saisie en modifiant sa couleur d'arrière-plan lorsqu'un utilisateur met l'accent dessus en cliquant dessus.

Entrez votre nom:

Selon le code ci-dessus, lorsqu'un utilisateur clique sur le champ de saisie, sa couleur d'arrière-plan changera en rose.

Sortir

La couleur d'arrière-plan du champ d'entrée a changé avec succès.

: Classe First-Child

Cette classe est utilisée pour coiffer le premier enfant d'un élément spécifié.

Exemple

Supposons que vous souhaitiez appliquer une propriété CSS uniquement sur le premier enfant d'un élément div. Utilisez le code suivant.

Ce paragraphe est le premier enfant de la div

Ce paragraphe est le deuxième enfant de la div

Dans le code ci-dessus, nous utilisons la classe: First-Child pour aligner le texte du

élément qui est le premier enfant de l'élément.

Sortir

La première

L'élément a été aligné vers la droite en utilisant la classe: Premier enfant.

: classe Lang

Cette classe est utilisée pour spécifier une langue qui doit être utilisée dans un élément particulier. Cette classe est utile lors de la spécification des règles de plusieurs langues dans un document.

Exemple

Dans l'exemple ci-dessous, nous spécifions certaines règles pour

élément avec attribut lang = "en". Cet ensemble de règles sera appliqué à chaque

élément ayant cet attribut.

C'est le premier paragraphe.

C'est le deuxième paragraphe.

C'est le troisième paragraphe.

Sortir

Comme vous pouvez le voir que le premier et le troisième

Les éléments ont l'atributant lang = «en» Par conséquent, les règles définies pour cette classe ne s'appliqueront que sur le premier et le troisième

éléments.

Conclusion

Les pseudo-classes décrivent un état unique d'un élément HTML et en fonction de ces états d'effets spéciaux peuvent être ajoutés aux éléments. Il y a beaucoup de pseudo-classes dans CSS, cependant, certaines des principales sont: Classe de liaison ,: Classe visitée ,: Classe Hover ,: Classe active ,: Classe Focus ,: First-Child Class, et: Lang Class. Ces classes sont expliquées en profondeur dans ce post ainsi que leurs exemples pertinents.