Pseudo-éléments CSS

Que sont les pseudo-éléments ?
Un pseudo-élément CSS est utilisé pour styliser des parties spécifiées d’un élément.
Par exemple, il peut être utilisé pour :
- Style de la première lettre, ou ligne, d’un élément
- Insérer du contenu avant ou après le contenu d’un élément
Syntaxe
La syntaxe des pseudo-éléments :
sélecteur :: pseudo-élément {
valeur de la propriété;
}
Le pseudo-élément ::first-line
Le ::first-line
le pseudo-élément est utilisé pour ajouter un style spécial à la première ligne d’un texte.
L’exemple suivant met en forme la première ligne du texte dans tous les éléments
:
Exemple
p::première ligne {
couleur : #ff0000 ;
font-variant : petites majuscules ;
}
Essayez-le vous-même »
Note: Le ::first-line
le pseudo-élément ne peut être appliqué qu’aux éléments de niveau bloc.
Les propriétés suivantes s’appliquent au ::first-line
pseudo-élément :
- propriétés de la police
- propriétés de couleur
- propriétés d’arrière-plan
- espacement des mots
- l’espacement des lettres
- texte-décoration
- alignement vertical
- transformation de texte
- hauteur de la ligne
- clair
Remarquez la notation double-virgule – ::first-line
contre
:first-line
Les doubles-points ont remplacé la notation à deux-points pour les pseudo-éléments dans CSS3. Il s’agissait d’une tentative du W3C de faire la distinction entre pseudo-classes
et pseudo-éléments.
La syntaxe à deux points a été utilisée à la fois pour les pseudo-classes et les pseudo-éléments dans CSS2 et CSS1.
Pour des raisons de compatibilité descendante, la syntaxe à deux-points est acceptable pour les pseudo-éléments CSS2 et CSS1.
Le pseudo-élément ::first-letter
Le ::first-letter
le pseudo-élément est utilisé pour ajouter un style spécial à la première lettre d’un texte.
L’exemple suivant met en forme la première lettre du texte dans tous les éléments
:
Note: Le ::first-letter
le pseudo-élément ne peut être appliqué qu’aux éléments de niveau bloc.
Les propriétés suivantes s’appliquent au pseudo-élément ::first-letter :
- propriétés de la police
- propriétés de couleur
- propriétés d’arrière-plan
- propriétés de la marge
- propriétés de rembourrage
- propriétés de bordure
- texte-décoration
- vertical-align (seulement si « float » vaut « none »)
- transformation de texte
- hauteur de la ligne
- flotter
- clair
Pseudo-éléments et classes HTML
Les pseudo-éléments peuvent être combinés avec des classes HTML :
L’exemple ci-dessus affichera la première lettre des paragraphes avec class= »intro », en rouge et dans une taille plus grande.
Pseudo-éléments multiples
Plusieurs pseudo-éléments peuvent également être combinés.
Dans l’exemple suivant, la première lettre d’un paragraphe sera en rouge, dans une taille de police xx-large. Le reste de la première ligne sera bleu et en petites majuscules. Le reste du paragraphe aura la taille et la couleur de police par défaut :
Exemple
p::première-lettre {
couleur : #ff0000 ;
taille de police : xx-large ;
}
p::première ligne {
couleur : #0000ff ;
font-variant : petites majuscules ;
}
Essayez-le vous-même »
CSS – Le pseudo-élément ::before
Le ::before
pseudo-element peut être utilisé pour insérer du contenu avant le contenu d’un élément.
L’exemple suivant insère une image avant le contenu de chaque élément
:
CSS – Le pseudo-élément ::after
Le ::after
pseudo-element peut être utilisé pour insérer du contenu après le contenu d’un élément.
L’exemple suivant insère une image après le contenu de chaque élément
:
CSS – Le pseudo-élément ::marker
Le ::marker
le pseudo-élément sélectionne les marqueurs des éléments de la liste.
L’exemple suivant stylise les marqueurs des éléments de liste :
CSS – Le pseudo-élément ::selection
Le ::selection
le pseudo-élément correspond à la partie d’un élément qui est sélectionné par un utilisateur.
Les propriétés CSS suivantes peuvent être appliquées à ::selection
:
color
,
background
, cursor
et outline
.
L’exemple suivant rend le texte sélectionné rouge sur fond jaune :
Tous les pseudo-éléments CSS
Sélecteur | Exemple | Exemple de description |
---|---|---|
::après | p :: après | Insérez quelque chose après le contenu de chaque élément |
::avant | p :: avant | Insérer quelque chose avant le contenu de chaque élément |
::première lettre | p :: première-lettre | Sélectionne la première lettre de chaque élément |
::Première ligne | p :: première ligne | Sélectionne la première ligne de chaque élément |
::marqueur | ::marqueur | Sélectionne les marqueurs des éléments de la liste |
::sélection | p :: sélection | Sélectionne la partie d’un élément qui est sélectionné par un utilisateur |
Toutes les pseudo-classes CSS
Sélecteur | Exemple | Exemple de description |
---|---|---|
:actif | un : actif | Sélectionne le lien actif |
:vérifié | entrée : cochée | Sélectionne chaque élément coché |
:désactivé | entrée : désactivée | Sélectionne chaque élément désactivé |
:vide | p :vide | Sélectionne chaque élément
qui n’a pas d’enfant |
:activé | entrée : activée | Sélectionne chaque élément activé |
:premier enfant | p:premier-enfant | Sélectionne tous les éléments
qui sont le premier enfant de son parent |
: premier du type | p : premier du type | Sélectionne chaque élément
qui est le premier élément de son parent |
:se concentrer | entrée:mise au point | Sélectionne l’élément qui a le focus |
:flotter | a : survolez | Sélectionne les liens au passage de la souris |
:dans la gamme | entrée:dans la plage | Sélectionne les éléments avec une valeur dans une plage spécifiée |
:invalide | entrée:invalide | Sélectionne tous les éléments avec une valeur invalide |
:lang(langue) | p:lang(it) | Sélectionne chaque élément
avec une valeur d’attribut lang commençant par « it » |
:dernier enfant | p:dernier-enfant | Sélectionne tous les éléments
qui sont le dernier enfant de son parent |
:dernier du type | p:dernier du type | Sélectionne chaque élément
qui est le dernier élément de son parent |
:lien | un lien | Sélectionne tous les liens non visités |
:non(sélecteur) | :pas p) | Sélectionne chaque élément qui n’est pas un élément |
:nième-enfant(n) | p:nth-enfant(2) | Sélectionne chaque élément
qui est le deuxième enfant de son parent |
:ntième-dernier-enfant(n) | p:nième-dernier-enfant(2) | Sélectionne chaque élément
qui est le deuxième enfant de son parent, à partir du dernier enfant |
:nième-dernier-du-type(n) | p:nième-dernier-du-type(2) | Sélectionne chaque élément
qui est le deuxième élément de son parent, à partir du dernier enfant |
:nième de type(n) | p:nième-de-type(2) | Sélectionne chaque élément
qui est le deuxième élément de son parent |
: uniquement de type | p: uniquement de type | Sélectionne chaque élément
qui est le seul élément de son parent |
:fils unique | p:enfant unique | Sélectionne chaque élément
qui est le seul enfant de son parent |
:facultatif | entrée:facultatif | Sélectionne les éléments sans attribut « required » |
: hors plage | entrée:hors plage | Sélectionne les éléments avec une valeur en dehors d’une plage spécifiée |
:lecture seulement | entrée : lecture seule | Sélectionne les éléments avec un attribut « readonly » spécifié |
:lire écrire | entrée : lecture-écriture | Sélectionne les éléments sans attribut « readonly » |
:requis | entrée :obligatoire | Sélectionne les éléments avec un attribut « required » spécifié |
:racine | racine | Sélectionne l’élément racine du document |
:cible | #actualités : cible | Sélectionne l’élément #news actif actuel (cliqué sur une URL contenant ce nom d’ancre) |
:valide | entrée:valide | Sélectionne tous les éléments avec une valeur valide |
:a visité | un : visité | Sélectionne tous les liens visités |
#Pseudoéléments #CSS