1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
---
title: Pseudo-éléments
slug: Web/CSS/Pseudo-elements
tags:
- CSS
- Pseudo-element
- Reference
- Sélecteur
translation_of: Web/CSS/Pseudo-elements
original_slug: Web/CSS/Pseudo-éléments
---
<div>{{CSSRef}}</div>
<p>Un <strong>pseudo-élément</strong> est un mot-clé ajouté à un sélecteur qui permet de mettre en forme certaines parties de l'élément ciblé par la règle. Ainsi, le pseudo-élément {{cssxref("::first-line")}} permettra de ne cibler que la première ligne d'un élément visé par le sélecteur.</p>
<pre class="brush: css no-line-numbers">/* La première ligne de chaque élément <p>. */
p::first-line {
color: blue;
text-transform: uppercase;
}
</pre>
<div class="blockIndicator note">
<p><strong>Note:</strong> À la différence des pseudo-éléments, <a href="/fr/docs/Web/CSS/Pseudo-classes">les pseudo-classes</a> peuvent être utilisées afin de mettre en forme un élément en fonction de son état.</p>
</div>
<h2 id="Syntaxe">Syntaxe</h2>
<pre class="syntaxbox">sélecteur::pseudo-élément {
propriété: valeur;
}</pre>
<p>On ne peut utiliser qu'un seul pseudo-élément dans un sélecteur. Le pseudo-élément doit apparaître après les sélecteurs simple de la déclaration</p>
<p>Depuis CSS3, on utilise deux fois le caractère deux-points (:) pour préfixer les pseudo-éléments (afin de pouvoir les différencier des pseudo-classes). Toutefois, la plupart des navigateurs prennent en charge les pseudo-éléments pour lesquels le préfixe n'est formé que d'un seul « : ».</p>
<h2 id="Liste_des_pseudo-éléments">Liste des pseudo-éléments</h2>
<div class="index">
<ul>
<li>{{CSSxRef("::after", "::after (:after)")}}</li>
<li>{{CSSxRef("::backdrop")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("::before", "::before (:before)")}}</li>
<li>{{CSSxRef("::cue", "::cue (:cue)")}}</li>
<li>{{CSSxRef("::first-letter", "::first-letter (:first-letter)")}}</li>
<li>{{CSSxRef("::first-line", "::first-line (:first-line)")}}</li>
<li>{{CSSxRef("::grammar-error")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("::marker")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("::part")}} {{Experimental_inline}}</li>
<li>{{CSSxRef("::placeholder")}} {{Experimental_Inline}}</li>
<li>{{CSSxRef("::selection")}}</li>
<li>{{CSSxRef("::slotted", "::slotted()")}}</li>
<li>{{CSSxRef("::spelling-error")}} {{Experimental_Inline}}</li>
</ul>
</div>
<h2 id="Exemples">Exemples</h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">p::first-line {
color: blue;
}</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><p>
C’était le Lapin Blanc qui revenait en trottinant,
et qui cherchait de tous côtés, d’un air inquiet,
comme s’il avait perdu quelque chose ; Alice
l’entendit qui marmottait : « La Duchesse ! La
Duchesse ! Oh ! mes pauvres pattes ; oh ! ma robe
et mes moustaches ! Elle me fera guillotiner aussi
vrai que des furets sont des furets ! Où pourrais-je
bien les avoir perdus ? » Alice devina tout de suite
qu’il cherchait l’éventail et la paire de gants paille,
et, comme elle avait bon cœur, elle se mit à les
chercher aussi ; mais pas moyen de les trouver.
</p></pre>
<h3 id="Résultat">Résultat</h3>
<p>{{EmbedLiveSample('Exemples', 250, 200)}}</p>
<table class="standard-table">
<tbody>
<tr>
<th>Navigateur</th>
<th>Version minimale</th>
<th>Prise en charge de :</th>
</tr>
<tr>
<td rowspan="2">Internet Explorer</td>
<td>8.0</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>9.0</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td rowspan="2">Firefox (Gecko)</td>
<td>1.0 (1.0)</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>1.0 (1.5)</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td rowspan="2">Opera</td>
<td>4.0</td>
<td><code>:pseudo-element</code></td>
</tr>
<tr>
<td>7.0</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
<tr>
<td>Safari (WebKit)</td>
<td>1.0 (85)</td>
<td><code>:pseudo-element ::pseudo-element</code></td>
</tr>
</tbody>
</table>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li><a href="/fr/docs/Web/CSS/Pseudo-classes">Les pseudo-classes</a></li>
</ul>
|
