Pseudo-éléments CSS

Qu'est-ce qu'un pseudo-élément ?

Les pseudo-éléments CSS sont utilisés pour définir les styles d'une partie spécifique de l'élément.

Par exemple, cela peut être utilisé pour :

  • Définir les styles de la première lettre et de la première ligne de l'élément
  • Insérer du contenu avant ou après le contenu de l'élément

Syntaxe

La syntaxe des pseudo-éléments :

selector::pseudo-element {
  property: value;
}

Pseudo-élément ::first-line

::first-line Les pseudo-éléments sont utilisés pour ajouter des styles spéciaux à la première ligne du texte.

L'exemple suivant ajoute un style à la première ligne de tous les éléments <p> :

Exemple

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Essayez-le vous-même

Attention :::first-line Les pseudo-éléments ne peuvent être appliqués qu'aux éléments en bloc.

Les propriétés suivantes s'appliquent ::first-line Pseudo-élément :

  • Propriété de police
  • Propriété de couleur
  • Propriété de fond
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • clear

Veuillez noterSyntaxe de double deux-points - ::first-line Comparaison :first-line

Dans CSS3, le double deux-points remplace la syntaxe de simple deux-points des pseudo-éléments. C'est ce que l'W3C essaie de distinguerPseudo-classeEtPseudo-élémentTentatives.

Dans CSS2 et CSS1, les pseudo-classes et les pseudo-éléments utilisent la syntaxe de simple deux-points.

Pour la compatibilité à l'avenir, les pseudo-éléments CSS2 et CSS1 acceptent la syntaxe de simple deux-points.

Pseudo-élément ::first-letter

::first-letter Les pseudo-éléments sont utilisés pour ajouter des styles spéciaux à la première lettre du texte.

L'exemple suivant configure le format de la première lettre du texte de tous les éléments <p> :

Exemple

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Essayez-le vous-même

Attention :::first-letter Les pseudo-éléments ne s'appliquent qu'aux éléments en bloc.

Les propriétés suivantes s'appliquent au pseudo-élément ::first-letter :

  • Propriété de police
  • Propriété de couleur
  • Propriété de fond
  • Propriété d'espace externe
  • Propriété d'espace interne
  • Propriété de bordure
  • text-decoration
  • vertical-align (uniquement lorsque "float" est "none")
  • text-transform
  • line-height
  • float
  • clear

Pseudo-éléments et classes CSS

Les pseudo-éléments peuvent être combinés avec les classes CSS :

Exemple

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Essayez-le vous-même

L'exemple suivant affichera la première lettre des paragraphes avec la classe "intro" en rouge et en grand.

Plusieurs pseudo-éléments

Il est également possible de combiner plusieurs pseudo-éléments.

Dans l'exemple suivant, la première lettre du paragraphe sera rouge et la taille de la police sera xx-large. Le reste de la première ligne deviendra bleu, en utilisant des lettres en minuscules. Le reste du paragraphe sera de la taille et de la couleur de police par défaut :

Exemple

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Essayez-le vous-même

Pseudo-élément ::before CSS

::before Les pseudo-éléments peuvent être utilisés pour insérer du contenu avant le contenu de l'élément.

L'exemple suivant insère une image avant le contenu de chaque élément <h1> :

Exemple

h1::before {
  content: url(smiley.gif);
}

Essayez-le vous-même

Pseudo-élément ::after CSS

::after Les pseudo-éléments peuvent être utilisés pour insérer du contenu après le contenu de l'élément.

L'exemple suivant insère une image après le contenu de chaque élément <h1> :

Exemple

h1::after {
  content: url(smiley.gif);
}

Essayez-le vous-même

Pseudo-élément ::selection CSS

::selection les pseudo-éléments pour correspondre aux parties des éléments sélectionnés par l'utilisateur.

Les propriétés CSS suivantes peuvent être appliquées à ::selection:

  • color
  • background
  • cursor
  • outline

L'exemple suivant affiche le texte sélectionné en rouge sur un fond jaune :

Exemple

::selection {
  color: red; 
  background: yellow;
}

Essayez-le vous-même

Tous les pseudo-éléments CSS

Sélecteur Exemple Description de l'exemple
::after p::after Insérez du contenu après chaque élément <p>.
::before p::before Insérez du contenu avant chaque élément <p>.
::first-letter p::first-letter Sélectionnez la première lettre de chaque élément <p>.
::first-line p::first-line Sélectionnez la première ligne de chaque élément <p>.
::selection p::selection Sélectionner la partie de l'élément sélectionnée par l'utilisateur.

Tous les pseudo-classes CSS

Sélecteur Exemple Description de l'exemple
:active a:active Sélectionner le lien actif.
:checked input:checked Sélectionner chaque élément <input> sélectionné.
:disabled input:disabled Sélectionner chaque élément <input> désactivé.
:empty p:empty Sélectionner chaque élément <p> sans enfant.
:enabled input:enabled Sélectionner chaque élément <input> activé.
:first-child p:first-child Sélectionner chaque élément <p> en tant que premier enfant de son parent.
:first-of-type p:first-of-type Sélectionner chaque élément <p> en tant que premier enfant de son parent.
:focus input:focus Sélectionner l'élément <input> qui a le focus.
:hover a:hover Sélectionner le lien auquel le curseur de la souris est suspendu.
:in-range input:in-range Sélectionner les éléments <input> avec une valeur dans une plage spécifiée.
:invalid input:invalid Sélectionner tous les éléments <input> avec une valeur invalide.
:lang(language) p:lang(it) Sélectionner chaque élément <p> avec une valeur d'attribut lang commençant par "it".
:last-child p:last-child Sélectionner chaque élément <p> en tant que dernier enfant de son parent.
:last-of-type p:last-of-type Sélectionner chaque élément <p> en tant que dernier enfant de son parent.
:link a:link Sélectionner tous les liens non visités.
:not(selector) :not(p) Sélectionner chaque élément qui n'est pas <p>.
:nth-child(n) p:nth-child(2) Sélectionner chaque élément <p> en tant que deuxième enfant de son parent.
:nth-last-child(n) p:nth-last-child(2) Sélectionner chaque élément <p> en tant que deuxième enfant de son parent, comptant à partir du dernier enfant.
:nth-last-of-type(n) p:nth-last-of-type(2) Sélectionner chaque élément <p> qui est le deuxième élément <p> du parent, à partir du dernier enfant.
:nth-of-type(n) p:nth-of-type(2) Sélectionner chaque élément <p> qui est le deuxième élément <p> de son parent.
:only-of-type p:only-of-type Sélectionner chaque élément <p> qui est l'élément unique de type <p> de son parent.
:only-child p:only-child Sélectionner l'élément <p> qui est l'enfant unique de son parent.
:optional input:optional Sélectionner les éléments <input> sans l'attribut "required".
:out-of-range input:out-of-range Sélectionner les éléments <input> avec une valeur en dehors de la gamme spécifiée.
:read-only input:read-only Sélectionner les éléments <input> spécifiant l'attribut "readonly".
:read-write input:read-write Sélectionner les éléments <input> sans l'attribut "readonly".
:required input:required Sélectionner les éléments <input> spécifiant l'attribut "required".
:root root Sélectionner l'élément racine de l'élément.
:target #news:target Sélectionner l'élément #news actif (clic sur l'URL contenant ce nom d'ancrage).
:valid input:valid Sélectionner tous les éléments <input> avec une valeur valide.
:visited a:visited Sélectionner tous les liens visités.