Tout sur les pseudo-classes et éléments CSS et leurs cas d'utilisation

Dans CSS Pseduo classes & elements est un mot-clé ajouté à un sélecteur qui vous permet de styliser et d'élément en fonction de son état ou d'une partie spécifique de l'élément.

Par exemple : vous survolez l'élément d'ancrage ou ajoutez différents styles pour voir si le lien est visité ou non, ou vous pouvez l'utiliser pour cibler la première lettre d'un mot dans un article. Et bien plus peut être réalisé en utilisant ces mots-clés.

Ils sont largement pris en charge par les principaux navigateurs et font partie du CSS depuis ses premières versions.

Qu’est-ce qu’une pseudo-classe ?

Une pseudo-classe revient à créer une règle qui s'applique à un élément en fonction d'une certaine condition ou d'un certain état.

Les pseudo-classes sont utilisées lorsque l'état d'un élément change en raison de la façon dont l'utilisateur interagit avec lui. Par exemple :

• Quand quelqu'un survole un bouton (:hover)
• Lorsqu'un champ de formulaire est sélectionné pour la saisie (:focus)
• Quand un élément est le premier ou le dernier enfant d'une liste

comprenons avec un exemple :

a:hover {
  color: blue; 
}

a:visited {
  color: navyblue;
}

Cet exemple montre deux états différents de l'élément d'ancrage. Lorsqu'un utilisateur survole un élément d'ancrage, la couleur du texte passe au bleu, mais affiche une couleur par défaut différente si l'utilisateur a déjà visité en cliquant sur cet élément d'ancrage.

Les pseudo-classes peuvent être représentées par un seul deux-points : au début du nom du mot-clé. Voici une liste de quelques pseudo-classes courantes :

• survol – Lorsque l'utilisateur survole (placez la souris sur un élément)
• :focus – Lorsqu'un utilisateur sélectionne un champ (comme une zone de texte dans un formulaire)
• :nth-child(n) – Lorsque vous souhaitez styliser un élément spécifique dans une liste ou une grille.
• :disabled – Lorsqu'un élément (comme un bouton) est désactivé et ne peut pas être cliqué.

Qu’est-ce que les pseudo-éléments ?

Les pseudo-éléments sont différents des pseudo-classes car ils ciblent des parties spécifiques d'un élément et non la totalité. Il vous permet de styliser ou d'insérer des éléments dans des parties spécifiques d'un élément auxquels vous n'auriez normalement pas accès directement.

Exemple de pseudo-éléments :

p::first-letter {      /* Accessing the first-letter of paragraph and adding style. */
  font-size: 2em; 
  font-weight: bold; 
  color: red;
}

Cet exemple montre comment accéder à la première lettre d'un paragraphe et appliquer nos styles en utilisant CSS.

Vous avez peut-être remarqué une chose, qui est l'utilisation du double :: signe deux-points utilisé pour les pseudo-éléments, alors que le signe : deux-points est utilisé pour les pseudo-classes. C'est la représentation réelle de la syntaxe pour les deux.

Pourquoi des pseudo-classes et des pseudo-éléments ?

Ces outils nous permettent de faire des choses plutôt sympas en CSS sans avoir besoin d'écrire beaucoup de HTML ou de JavaScript supplémentaire. Ils donnent plus de contrôle sur votre conception et rendent votre site Web plus interactif et dynamique avec seulement quelques lignes de CSS.

Voici comment vous pouvez différencier les deux et vous aider à choisir le bon outil :

• Les pseudo-classes aident à créer des interactions telles que des effets de survol, des champs de saisie ciblés ou un style basé sur une position dans la liste.
• Les pseudo-éléments permettent de styliser des parties spécifiques d'un élément ou d'ajouter du contenu décoratif comme des icônes, des symboles avant ou après un élément.

Prise en charge du navigateur

Les pseudo-éléments et pseudo-classes sont pris en charge dans tous les principaux navigateurs, mais à mesure que le Web se développe, de nouveaux mots-clés sont ajoutés, ce qui ne fournit pas de prise en charge par défaut pour eux. Ainsi, nous devons utiliser des préfixes de navigateur pour résoudre ces problèmes.

Par exemple, les pseudo-classes plus récentes comme :not() ne sont pas prises en charge dans les anciens navigateurs, elles se comportent donc différemment. Vous devez toujours vérifier quelle propriété est prise en charge sur quelle version du navigateur à l'aide d'un outil en ligne Caniuse.com

Conclusion

Dans CSS, les pseudo-classes et les pseudo-éléments constituent vos armes secrètes pour concevoir des sites Web vivants et beaux sans ajouter une tonne de code supplémentaire. Ils vous aident à styliser des éléments en fonction de l'interaction ou de l'état (pseudo-classes) ou à cibler des parties spécifiques d'un élément (pseudo-éléments).

Ce blog est initialement publié sur le site Web Programmingly.dev. Lire l'article complet en suivant ce lien

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!