Pseudo-éléments

The CSS Podcast - 014: Pseudo-elements

Si vous avez un article et que vous souhaitez que la première lettre soit beaucoup plus grande, comment procéder ?

En CSS, vous pouvez utiliser le pseudo-élément ::first-letter pour obtenir ce type de détail 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 est comme ajouter ou cibler un élément supplémentaire sans avoir à ajouter du code HTML. Cet exemple de solution, qui utilise ::first-letter, est l'un des nombreux pseudo-éléments. Ils ont différents rôles. Dans cette leçon, vous allez découvrir les pseudo-éléments 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. Toutefois, n'oubliez pas que tout autre élément qu'une chaîne vide sera probablement annoncé par un lecteur d'écran. Vous pouvez ajouter une image url, qui insère une image dans ses dimensions d'origine, ce qui vous empêche de la redimensionner. Vous pouvez également insérer un counter.

Une fois un élément ::before ou ::after créé, vous pouvez lui appliquer le style que vous souhaitez, sans limite. Vous ne pouvez insérer un élément ::before ou ::after que dans un élément qui accepte des é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 toutes les propriétés CSS ne peuvent pas être utilisées lors du ciblage de ::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)
• les propriétés de texte (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 une valeur display de 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 établissements
• font établissements
• text établissements

::backdrop

Si un élément est présenté en mode plein écran, comme un <dialog> ou un <video>, vous pouvez styliser l'arrière-plan (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 le point 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 établissements
• 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 peut être utilisé pour styliser tout le texte sélectionné, comme dans la démonstration ci-dessus. Il peut également être utilisé en combinaison avec d'autres sélecteurs pour 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 établissements

::placeholder

Vous pouvez ajouter une info-bulle à des é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 établissements
• font établissements
• text établissements

::cue

Le dernier pseudo-élément de ce tour d'horizon est le pseudo-élément ::cue. Cela vous permet de styliser les repères WebVTT, qui sont les sous-titres d'un élément <video>.

Vous pouvez également transmettre un sélecteur dans un ::cue, ce qui vous permet de styliser 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;
}

Vérifier vos connaissances

Tester vos connaissances sur les pseudo-éléments