Mes notes personnelles sur le développement Web

Cette page présente une liste des principales pseudos-classes et des pseudos-éléments les plus courants

Pseudos-classes

L'utilisation des pseudo-classes est très populaire sur les liens hypertextes qui changent de décor selon si ils sont nouvellement affichés, déjà visités ou survolés. Or, leur utilisation s'étend aux autres objets HTML tel que les images, les conteneurs, les listes... Une illustration est fournie dans l'exemple sur les pseudos-classes.

:active

Pseudo-classe qui désigne un lien hypertexte sélectionné. Il s'agit de l'instant où le visiteur clique sur le lien. On peut voir l'effet de cette pseudo-classe dans le cas où le lien est ouvert dans une nouvelle fenêtre.

:checked

Pseudo-classe qui représente n'importe quel bouton radio <input type = "radio">, case à cocher <input type = "checkbox">, ou option <option"> d'un élément <select> qui est coché ou activé.

:first-child

Pseudo-classe qui désigne le premier élément enfant.

:focus

Pseudo-classe qui désigne un élément activé ou sélectionné suite à un clic ou une tabulation ; cette pseudo-classe est souvent utilisé sur les champs de formulaire.

:hover

Pseudo-classe qui désigne un objet survolé par le curseur de la souris, il peut être un hyperlien ou n'importe quel autre objet.

:link

Pseudo-classe qui désigne un lien hypertexte dont la page cible (celle spécifiée dans son attribut href) n'a pas encore été visitée. Elle peut aider les internautes à distinguer les liens qu'ils n'ont pas encore exploré.

:nth-child(n)

Pseudo-classe qui désigne un élément enfant de n'importe quel rang.Le paramètre n désigne le rang de l'élément sur lequel il faut appliquer la règle de style.

visited

Pseudo-classe qui désigne un lien hypertexte dont la page cible a déjà été visitée. C'est un genre d'historique en quelque sorte.

D'autres pseudos-classessont disponibles sur le site MDN Web docs

Pseudo-éléments

Depuis CSS3, il faut utiliser deux fois le caractère : pour préfixer les pseudos-éléments pour les différencier des pseudo-classes. La plupart des navigateurs prennent en charge les pseudos-éléments pour lesquels le préfixe n'est formé que d'un seul :. Une illustration de ce mécanisme est fournie dans l'exemple sur les pseudos-éléments.

::after (:after)

Pseudo-élément qui sera le dernier de l'élément sélectionné. Il est souvent utilisé du contenu en utilisant la propriété CSS content.

::before (:before)

Pseudo-élément qui sera le premier de l'élément sélectionné. Il est souvent utilisé du conteu en utilisant la propriété CSS content.

::cue (:cue)

Pseudo-élément pour cibler les indications textuelles WebVTT

::first-letter (:first-letter)

Pseudo-élément pour sélectionner la première lettre de la première ligne d'un bloc, si e)lle n'est pas précédée par un quelconque autre contenu (comme une image ou un tableau en ligne) sur sa ligne.

::first-line (:first-line)

Pseudo-élément pour sélectionner la première ligne d'un élément. La quantité de texte sur la première ligne dépend de nombreux facteurs.

::placeholder

Pseudo-élément représentant le texte de substitution pour un élément q<input> ou <textarea>.

::selection

Pseudo-élément pour appliquer des règles CSS à une portion du document sélectionnée par l'utilisateur.

D'autres pseudos-éléments sont disponibles sur le site MDN Web docs