Pseudo-éléments

Podcast CSS – 014: Pseudo-éléments

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

Dans 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 d'autres éléments HTML. Cet exemple de solution, avec ::first-letter, est l'un des nombreux pseudo-éléments. Ils ont une gamme de rôles, Dans cette leçon, vous allez découvrir quels pseudo-éléments sont disponibles et comment les utiliser.

::before et ::after

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

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

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

Le champ content peut correspondre à n'importe quelle chaîne. - même si elle est vide, mais gardez à l'esprit que tout autre élément qu'une chaîne vide est susceptible d'être annoncé par un lecteur d'écran. Vous pouvez ajouter une image url, qui insère une image dans ses dimensions d'origine, vous ne pourrez donc pas le redimensionner. Vous pouvez également insérer un counter

Une fois qu'un élément ::before ou ::after a été créé, vous pouvez lui appliquer un style comme vous le souhaitez, sans limites. 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. Sachez que les propriétés CSS ne peuvent pas toutes être utilisées pour le ciblage ::first-letter Les propriétés disponibles sont les suivantes:

• color
• Propriétés background (telles que background-image)
• Propriétés border (telles que border-color)
• float
• Propriétés font (telles que font-size et font-weight)
• Propriétés de texte (telles que text-decoration et word-spacing)

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

::first-line

::first-line le pseudo-élément vous permet d'appliquer un style à 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 l'un de vos éléments s'affiche en mode plein écran, comme <dialog> ou <video>, vous pouvez appliquer un style au fond (espace entre l'élément et le reste de la page) à l'aide de Pseudo-élément ::backdrop:

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

::marker

::marker Le pseudo-élément 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 é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

::selection Le pseudo-élément vous permet d'appliquer un style à l'apparence du texte sélectionné.

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

Ce pseudo-élément peut être utilisé pour appliquer un style à l'ensemble du texte sélectionné, comme dans la démonstration 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 établissements

::placeholder

Vous pouvez ajouter un indice aux éléments du formulaire, comme <input> avec un attribut placeholder. ::placeholder vous permet d'appliquer un style à ce texte.

input::placeholder {
  color: darkcyan;
}

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

• color
• background établissements
• font établissements
• text établissements

::cue

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

Vous pouvez également transmettre un sélecteur à un ::cue, 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