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
désigne 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
désigne la première lettre de tous les éléments qui
contiennent du texte.
h1::first-letter
désigne la première lettre des titres h1.
Liste des pseudo-éléments.
Liste des pseudo-éléments.
- ::before {...} ::after {...}
Désigne l'emplacement situé avant et après l'élément.
Ces deux pseudo-éléments sont souvent utilisés avec la propriétécontent
.Le symbole '⇛' a été ajouté au début de cet élément, en rouge.
Tandis que '⇚' a été ajouté après, en rouge également. - ::first-letter {...}
Désigne la première lettre d'un texte. Pratique pour formater des lettrines.
La première lettre de ce paragraphe est en rouge et en gras.
Plus d'informations et d'exemples sur le pseudo-élément
::first-letter
. - ::first-line {...}
Désigne la première ligne de texte.
La première ligne de ce paragraphe est en rouge mais les lignes suivantes restent dans la couleur par défaut. En réduisant la largeur de la fenêtre du navigateur vous constaterez que le pseudo élément
::first-line
est dynamique.Plus d'informations et d'exemples sur le pseudo-élément
::first-line
. - ::marker {...}
Désigne les marqueurs dans une liste à puces ou une liste numérotée.
::marker
désigne la puce ou le numéro lui-même.- Printemps
- Été
- Automne
- Hiver
- Printemps
- Été
- Automne
- Hiver
Voir d'autres exemples avec le pseudo-élément
::marker
. - ::placeholder {...}
Désigne le texte d'aide affiché avant la saisie.
Date : - Code postal :
Plus d'exemples sur le pseudo-élément
::placeholder
. - ::selection {...}
Le pseudo-élément
::selection
désigne le texte, ou un élément quelconque, lorsqu'il est sélectionné.Sur l'exemple ci-dessous, la mise en forme du texte sélectionné dans la zone de saisie est différente. Observez bien les deux règles dans le code CSS : il y a un espace dans le sélecteur de la deuxième règle. Cela suffit pour désigner les éléments enfants, alors que la première règle (sans espace) s'applique à l'élément lui-même.
Sélectionnez une partie du texte de ce cadre pour voir s'appliquer la mise en forme.
Pour des exemples d'utilisation et des explications plus détaillées, reportez-vous à la page
::selection
. - ::spelling-error {...} ::grammar-error {...}
Ces pseudo-éléments désignent les mots ou parties de textes qui comportent des fautes d'orthographe (
spelling
) ou de grammaire (grammar
). A l'heure actuelle (2019) aucun navigateur ne traite ces sélecteurs.Il faut noter également que cette fonctionnalité peut être désactivée avec l'attribut HTML
spellcheck="false"
Ce paragraphe contient des fotes d'ortografe. Si votre navigateur traite le sélecteur
::spelling-error
, les mots erronés s'affichent soulignés en rouge.Cette phrase contiennent plusieurs faute d'accord.
Lorsque les navigateurs traiteront le sélecteur::grammar-error
, elle apparaîtra soulignée en rouge. - ::target-text {...}
Le pseudo-élément
::target-text
désigne le texte qui a été spécifié dans l'adresse de la page. Pour les navigateurs qui supportent la fonctionnalitéscroll to text
, il est en effet possible de donner une portion de texte dans l'url, et le navigateur affiche la page à cet endroit.Cliquez sur les liens ci-après et observez la barre d'adresse, ainsi que la mise en forme qui s'applique sur le texte recherché. Exemples : Lien 1 - Lien 2.
Vous trouverez plus de précision sur ce pseudo-élément en consultant la page
::target-text
.