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, cursoret 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