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.

Terme clé : vous pouvez créer un compteur nommé, puis l'incrémenter en fonction de sa position dans le flux de documents. Ils peuvent être très utiles dans toutes sortes de contextes, par exemple pour numéroter automatiquement un plan.

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.

: input[type="checkbox"] est une exception. Il est autorisé à avoir des enfants de pseudo-éléments.

::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;
}

Remarque : Vous ne pouvez utiliser :first-letter que sur des conteneurs de blocs. Par conséquent, cela ne fonctionnera pas si vous essayez de l'ajouter à un élément qui contient display: inline.

::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

Browser Support

• 57
• 79
• 51
• 10.1

Source

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

Remarque : Un placeholder n'est pas un <label> et ne doit pas être utilisé à la place d'un <label>. Les éléments de formulaire doivent être libellés, sinon ils seront inaccessibles.

::cue

Browser Support

• 26
• 79
• 55
• 7

Source

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

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

::before

N'oubliez pas d'ajouter content: '';.

::first-paragraph

Cela n'existe pas en CSS.

::after

N'oubliez pas d'ajouter content: '';.

::marker

Il s'agit de l'élément puce lorsque vous utilisez un élément de liste ou un type d'affichage.

::pencil

Cela n'existe pas en 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", ils ne se trouvent pas dans le code HTML, car ils appartiennent au navigateur.

Faux

Elles peuvent être ciblées par CSS, mais ne figurent pas dans le code HTML.