Pseudo-éléments

Podcast CSS – 014: Pseudo-éléments

Si vous avez un article de contenu et que vous voulez que la première lettre soit un nombre plus important, comment y parvenir ?

Deux paragraphes de texte avec une goutte bleue

En CSS, vous pouvez utiliser le pseudo-élément ::first-letter pour obtenir ce type de détails de conception.

p::first-letter {
  color: blue;
  float: left;
  font-size: 2.6em;
  font-weight: bold;
  line-height: 1;
  margin-inline-end: 0.2rem;
}

Un pseudo-élément revient à ajouter ou cibler un élément supplémentaire sans avoir à ajouter plus de code HTML. Cet exemple de solution, qui utilise ::first-letter, est l'un des nombreux pseudo-éléments. Ils ont différents rôles et, dans cette leçon, vous allez découvrir quels pseudo-éléments sont disponibles et comment les utiliser.

::before et ::after

Les pseudo-éléments ::before et ::after créent un élément enfant dans un élément uniquement si vous définissez une propriété content.

.my-element::before {
    content: "";
}

.my-element::after {
    content: "";
}

content peut être n'importe quelle chaîne, même vide, mais gardez à l'esprit que toute chaîne autre qu'une chaîne vide sera probablement annoncée par un lecteur d'écran. Vous pouvez ajouter une image url, qui insérera une image dans ses dimensions d'origine. Vous ne pourrez donc pas la redimensionner. Vous pouvez également insérer un objet counter.

Une fois qu'un élément ::before ou ::after a été créé, vous pouvez lui appliquer un style sans limite. Vous ne pouvez insérer un élément ::before ou ::after que dans un élément qui accepte les éléments enfants (éléments avec une arborescence de documents). Par conséquent, les éléments tels que <img />, <video> et <input> ne fonctionneront pas.

::first-letter

Nous avons rencontré ce pseudo-élément au début de la leçon. Notez que vous ne pouvez pas utiliser toutes les propriétés CSS lorsque vous ciblez ::first-letter. Les propriétés disponibles sont les suivantes:

  • color
  • Propriétés background (par exemple, background-image)
  • Propriétés border (par exemple, border-color)
  • float
  • Propriétés font (telles que font-size et font-weight)
  • Propriétés textuelles (telles que text-decoration et word-spacing)
p::first-letter {
  color: goldenrod;
  font-weight: bold;
}

::first-line

Le pseudo-élément ::first-line ne vous permet de styliser la première ligne de texte que si l'élément auquel ::first-line est appliqué a la valeur display block, inline-block, list-item, table-caption ou table-cell.

p::first-line {
  color: goldenrod;
  font-weight: bold;
}

Comme pour le pseudo-élément ::first-letter, vous ne pouvez utiliser qu'un sous-ensemble de propriétés CSS:

  • color
  • background de propriétés
  • font de propriétés
  • text de propriétés

::backdrop

Si l'un de vos éléments est présenté en mode plein écran, tel qu'un <dialog> ou un <video>, vous pouvez appliquer un style au fond (l'espace entre l'élément et le reste de la page) avec le pseudo-élément ::backdrop:

video::backdrop {
  background-color: goldenrod;
}

::marker

Le pseudo-élément ::marker vous permet de styliser la puce ou le numéro d'un élément de liste, ou la flèche d'un élément <summary>.

::marker {
  color: hotpink;
}

ul ::marker {
  font-size: 1.5em;
}

ol ::marker {
  font-size: 1.1em;
}

summary::marker {
  content: '\002B'' '; /* Plus symbol with space */
}

details[open] summary::marker {
  content: '\2212'' '; /* Minus symbol with space */
}

Seul un petit sous-ensemble de propriétés CSS est compatible avec ::marker:

  • color
  • content
  • white-space
  • font de propriétés
  • Propriétés animation et transition

Vous pouvez modifier le symbole du repère à l'aide de la propriété content. Vous pouvez l'utiliser pour définir un symbole plus et moins pour les états fermé et vide d'un élément <summary>, par exemple.

::selection

Le pseudo-élément ::selection vous permet de styliser l'apparence du texte sélectionné.

::selection {
  background: green;
  color: white;
}

Ce pseudo-élément permet d'appliquer un style à l'ensemble du texte sélectionné, comme dans la démo ci-dessus. Vous pouvez également l'utiliser en combinaison avec d'autres sélecteurs pour obtenir un style de sélection plus spécifique.

p:nth-of-type(2)::selection {
  background: darkblue;
  color: yellow;
}

Comme pour les autres pseudo-éléments, seul un sous-ensemble de propriétés CSS est autorisé:

  • color
  • background-color, mais pas background-image
  • text de propriétés

::placeholder

Navigateurs pris en charge

  • 57
  • 79
  • 51
  • 10.1

Source

Vous pouvez ajouter une astuce aux éléments de formulaire, tels que <input> avec un attribut placeholder. Le pseudo-élément ::placeholder vous permet de styliser ce texte.

input::placeholder {
  color: darkcyan;
}

::placeholder n'est compatible qu'avec un sous-ensemble de règles CSS:

  • color
  • background de propriétés
  • font de propriétés
  • text de propriétés

::cue

Navigateurs pris en charge

  • 26
  • 79
  • 55
  • 7

Source

La dernière étape de cette présentation des pseudo-éléments est le pseudo-élément ::cue. Cela vous permet de styliser les repères WebVTT, qui sont les légendes d'un élément <video>.

Vous pouvez également transmettre un sélecteur dans une ::cue, ce qui vous permet d'appliquer un style à des éléments spécifiques à l'intérieur d'une légende.

video::cue {
  color: yellow;
}

video::cue(b) {
  color: red;
}

video::cue(i) {
  color: lightpink;
}

Testez vos connaissances

Tester vos connaissances sur les pseudo-éléments

Parmi les éléments suivants, lesquels ne sont pas des pseudo-éléments ?

::before
N'oubliez pas d'ajouter content: '';.
::first-paragraph
Cet élément n'existe pas dans CSS.
::after
N'oubliez pas d'ajouter content: '';.
::marker
Il s'agit de l'élément de puce lorsque vous utilisez un élément de liste ou un type d'affichage.
::pencil
Cet élément n'existe pas dans CSS.
:active
Il s'agit d'une pseudo-classe et non d'un pseudo-élément.

Les pseudo-éléments se trouvent dans un fichier HTML.

Vrai
Bien que les outils de développement puissent afficher des pseudo-éléments dans le panneau "Éléments", ceux-ci ne se trouvent pas dans le code HTML, mais appartiennent au navigateur.
Faux
Elles peuvent être ciblées par CSS, mais ne figurent pas dans le code HTML.