Gagnez plus de pouvoir sur vos conceptions Web à l’aide de ces sélecteurs CSS avancés.

CSS prend en charge une variété de sélecteurs pour identifier les éléments à styliser, chacun avec son propre ensemble de règles. Bien que la plupart des méthodes de sélection soient simples, les pseudo-classes et pseudo-éléments offrent plus de flexibilité. Ils vous permettent de sélectionner des éléments en fonction de leur état ou de leur position dans une structure, ou de sélectionner des parties spécifiques du contenu.

Ces sélecteurs peuvent être délicats à utiliser, et il est facile de mélanger des pseudo-classes avec des pseudo-éléments, alors comment les différencier ?

Comprendre les pseudo-classes CSS

Une pseudo-classe CSS est comme un mot-clé spécial que vous pouvez utiliser avec des sélecteurs pour styliser les éléments de différentes manières. Ces mots-clés vous aident à cibler des éléments lorsque certaines choses se produisent, par exemple lorsqu'un utilisateur passe sa souris sur un élément, clique dessus ou tape quelque chose dans un champ de saisie.

instagram viewer

Les pseudo-classes rendent votre page Web plus interactive et réactive en modifiant l'apparence ou le comportement des éléments en fonction des actions de l'utilisateur. Lorsque vous utilisez-les avec d'autres sélecteurs CSS, ils offrent un contrôle précis sur le style et l’interactivité.

Syntaxe et utilisation des pseudo-classes CSS

La syntaxe d'une pseudo-classe CSS se compose de deux points (:) suivi du nom d'une pseudo-classe. Voici la syntaxe de base :

selector:pseudo-class {
/* styles */
}

Dans cette syntaxe :

  • sélecteur fait référence au ou aux éléments auxquels vous souhaitez sélectionner et appliquer des styles. Il peut s'agir d'un élément HTML, d'une classe, d'un identifiant ou d'un sélecteur plus complexe comme une combinaison. Le sélecteur est facultatif, mais vous en utiliserez généralement un; sans cela, votre pseudo-classe ciblera tous les éléments auxquels elle peut s'appliquer.
  • pseudo-classe est le mot-clé qui représente un état ou une condition spécifique que vous souhaitez cibler.

CSS classe les pseudo-classes en plusieurs groupes en fonction de leurs fonctionnalités et des conditions qu'elles ciblent. Voici les principales catégories ainsi que quelques exemples :

Interaction de l'utilisateur

:flotter

Sélectionne un élément lorsque le pointeur de la souris le survole.

:actif

Sélectionne un élément lorsqu'un utilisateur l'active, généralement en cliquant.

:a visité

Sélectionne les liens que l'utilisateur a visités.

De construction

:premier enfant

Sélectionne le premier élément enfant d'un parent.

:dernier enfant

Sélectionne le dernier élément enfant d'un parent.

:énième enfant (n)

Sélectionne les éléments en fonction de leur position au sein d'un parent, vous permettant de cibler des enfants spécifiques.

Lié au formulaire

:désactivé

Sélectionne les éléments de formulaire désactivés.

:vérifié

Sélectionne les boutons radio ou les cases à cocher cochés.

État de l'élément d'interface utilisateur

:invalide

Sélectionne les éléments de formulaire non valides.

:requis

Sélectionne les champs obligatoires des éléments de formulaire.

:facultatif

Sélectionne les éléments de formulaire qui sont des champs facultatifs.

Lié au lien

:lien

Sélectionne les liens non visités.

Basé sur la langue

:lang()

Sélectionne les éléments en fonction de la langue spécifiée dans leur attribut « lang ».

Vous pouvez essayer un exemple courant en appliquer des effets de survol aux images dans une galerie. Les styles typiques incluent l'agrandissement ou la décoloration de ces images lorsque quelqu'un les survole.

Explorer les pseudo-éléments CSS

Un pseudo-élément CSS est comme un mot-clé spécial que vous pouvez utiliser avec des sélecteurs pour styliser des parties spécifiques du contenu d'un élément ou pour insérer du contenu supplémentaire. Ces mots-clés vous permettent de cibler et de styliser les éléments en fonction de leur structure de contenu.

Pseudo-éléments améliorez la conception et la mise en page de votre page Web en vous donnant la possibilité de styliser les éléments d'une manière qui n'était traditionnellement possible qu'avec de vrais éléments HTML.

Syntaxe et implémentation des pseudo-éléments CSS

Les pseudo-éléments en CSS ont une syntaxe spécifique qui implique l'utilisation de deux deux-points (::) suivi du nom du pseudo-élément. Voici la syntaxe de base :

selector::pseudo-element {
/* styles */
}

Dans cette syntaxe :

  • sélecteur cible l'élément auquel vous souhaitez appliquer le pseudo-élément. Il peut s'agir de n'importe quel sélecteur CSS valide, y compris aucun.
  • pseudo-élément est le nom du pseudo-élément que vous souhaitez cibler. Vous ne pouvez utiliser qu’un seul pseudo-élément dans un sélecteur car leur combinaison n’a pas vraiment de sens.

Voici quelques-uns des pseudo-éléments :

::avant

Insère du contenu avant le contenu de l'élément sélectionné.

::après

Insère du contenu après le contenu de l'élément sélectionné.

::première lettre

Stylise la première lettre du texte dans un élément.

::sélection

Stylise la partie de texte qu'un utilisateur a sélectionnée avec son curseur.

::marqueur

Stylise la zone de marquage d'un élément de liste (par exemple, la puce ou le numéro dans une liste).

::signal

Applique des styles aux signaux dans les éléments multimédias tels que

Le ::avant et ::après les pseudo-éléments peuvent être particulièrement difficiles à comprendre, donc les pratiquer vous aidera à maîtriser le reste.

Similitudes et différences

Voici les similitudes et les différences entre les pseudo-classes et pseudo-éléments CSS :

Pseudo-Classes

Pseudo-éléments

Syntaxe

Préfixé par un seul deux-points (:).

Préfixé par deux deux-points (::).

Usage

Sélectionnez et stylisez les éléments en fonction de leur état, de leur position ou de l'interaction de l'utilisateur.

Stylisez des parties spécifiques du contenu d’un élément ou créez des éléments virtuels.

Sélecteurs

Peut se produire à tout moment dans un sélecteur complexe ou composé.

Doit être le composant final d'un sélecteur et ne peut apparaître qu'une seule fois.

Insertion de contenu

N'insère pas de contenu, principalement pour le style basé sur l'état.

Peut insérer du contenu ou des éléments virtuels avant ou après le contenu de l'élément sélectionné.

Style typographique

Non généralement utilisé pour le style typographique.

Utilisé pour le style du texte et de la typographie (par exemple, ::first-line, ::first-letter).

Pièces ciblées

Cible des éléments entiers.

Cible des parties spécifiques du contenu d'un élément.

Prise en charge du navigateur

Généralement bien soutenu.

Généralement bien pris en charge, mais certains navigateurs plus anciens peuvent avoir une prise en charge limitée.

Les pseudo-classes et les pseudo-éléments sont importants en CSS pour créer divers styles et fonctionnalités interactives. Bien qu'ils présentent certaines similitudes, ils ont chacun leur propre rôle dans la conception et le développement de sites Web.

Pseudo-classes et pseudo-éléments en action

Vous pouvez vous entraîner à utiliser des pseudo-classes et des pseudo-éléments CSS dans différents projets pour évaluer votre compréhension. Des exemples de projets simples que vous pouvez réaliser incluent, entre autres, des cartes de profil, des menus de navigation et un style de liste. Ces projets offrent une expérience pratique pour améliorer vos compétences CSS tout en intégrant l'interactivité et le style dans vos conceptions Web.