Les sélecteurs CSS par pseudo-éléments.

Pseudo-éléments.

Ces sélecteurs font référence à des éléments qui ne sont pas forcément délimités par des balises HTML. Par exemple le pseudo élément ::first-letter désigne la première lettre du texte d'un élément, bien qu'aucune balise HTML ne délimite cette première lettre.

Ne confondez pas pseudo-éléments et pseudo-classes. La distinction est la suivante :

  • Les pseudo-classes désignent un état de l'élément, par exemple un lien qui a déjà été visité, un élément survolé par la souris, etc.
  • Les pseudo-éléments désignent une partie d'un élément. Par exemple ::first-line cible la première ligne de texte de l'élément.

Les noms des pseudo-éléments commencent par un double deux points ( :: ). Remarque ! Les navigateurs reconnaissent généralement le simple deux points aussi bien pour les pseudo-classes que pour les pseudo-éléments. C'est dû au fait que les précédentes versions de CSS ne distinguaient pas pseudo-classes et pseudo-éléments.

Utilisés seuls, les pseudo-éléments s'appliquent à toutes les balises mais il est facile de les combiner avec un sélecteur classique pour en limiter la portée :

    ::first-letter   cible la première lettre de tous les éléments qui contiennent du texte.
    h1::first-letter   cible la première lettre des titres h1.

Définition de sous titres pour vidéos

::cue
Désigne les sous-titres affichés pendant la restitution d'une vidéo ou d'un contenu sonore.

Module CSS - Débordements

⚠
::scroll-button()
Cible les boutons de défilement. La valeur passée en paramètre indique plus précisément quel bouton doit être ciblé.
⚠
::scroll-marker
Pseudo-élément qui cible individuellement les marqueurs de défilement (marque-page).
⚠
::scroll-marker-group
Pseudo-élément qui cible le conteneur des marqueurs de défilement (marque-page).

Module CSS - Pseudo-éléments

::after
Pseudo-élément désignant l'emplacement situé juste après un élément.
::before
Pseudo-élément désignant l'emplacement situé juste avant un élément.
::details-content
Ce pseudo-élément cible le contenu détaillé d'une balise details.
::file-selector-button
Cible le bouton dans une zone de saisie du type file. Ce bouton a un rendu différent dans chaque navigateur.
::first-letter
Pseudo-élément désignant la première lettre du paragraphe.
::first-line
Pseudo-élément désignant la première ligne du paragraphe.
⚠
::grammar-error
Des pseudo-élément ciblant les textes comportant des fautes d'orthographe (::spelling-error) ou des fautes de grammaire (::grammar-error).
::highlight()
Pseudo-élément qui cible le texte sélectionné à la suite d'une recherche dans le navigateur.
✗
::inactive-selection
Désigne l'élément ou le texte sélectionné lorsque la fenêtre sur laquelle il se trouve n'est pas active.
::marker
Pseudo-élément désignant le marqueur dans une liste (puce ou numéro).
::placeholder
Pseudo-élément désignant le texte de substitution dans une zone de saisie (attribut placeholder).
⚠
::prefix
Cible les caractères de ponctuation qui peuvent précéder la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères qui la précède.
⚠
::search-text
Cible le texte recherché par l'internaute (zone de recherche CTRL+F du navigateur).
::selection
Pseudo-élément désignant le contenu sélectionné par l'utilisateur.
::spelling-error
Pseudo-élément désignant les mots ou les textes comportant des fautes d'orthographe.
⚠
::suffix
Cible les caractères de ponctuation qui peuvent suivre la première lettre d'un élément. Permet une stylisation différente de la première lettre et des caractères de ponctuation qui la suivent.
::target-text
Cible le texte de l'élément désigné par le signet de l'url.

Module CSS - Transitions d'afichage

::view-transition
Pseudo-élément ciblant des éléments pendant le temps d'une transition d'affichage.
::view-transition-group()
Cible un groupe d'éléments créés pendant une transition d'affichage (View Transition).
::view-transition-image-pair()
Cible les deux copies d'écran réalisées pour les besoins d'une transition d'affichage (View Transition).
::view-transition-new()
Cible la copie d'écran du nouvel état, dans le cas d'une transition d'affichage.
::view-transition-old()
Cible la copie d'écran de l'état antérieur, dans le cas d'une transition d'affichage.

Sélecteurs

::backdrop
Pseudo-élément ciblant l'élément ajouté par les navigateurs en arrière des boites de dialogue ou des éléments affichés en plein écran.