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 ?
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 quefont-size
etfont-weight
) - Propriétés textuelles (telles que
text-decoration
etword-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ésfont
de propriétéstext
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
ettransition
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 pasbackground-image
text
de propriétés
::placeholder
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ésfont
de propriétéstext
de propriétés
::cue
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
content: '';
.::first-paragraph
::after
content: '';
.::marker
::pencil
:active
Les pseudo-éléments se trouvent dans un fichier HTML.