diff options
author | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
---|---|---|
committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 12:36:08 +0100 |
commit | 39f2114f9797eb51994966c6bb8ff1814c9a4da8 (patch) | |
tree | 66dbd9c921f56e440f8816ed29ac23682a1ac4ef /files/fr/web/css/pseudo-éléments/index.html | |
parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
download | translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.gz translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.tar.bz2 translated-content-39f2114f9797eb51994966c6bb8ff1814c9a4da8.zip |
unslug fr: move
Diffstat (limited to 'files/fr/web/css/pseudo-éléments/index.html')
-rw-r--r-- | files/fr/web/css/pseudo-éléments/index.html | 132 |
1 files changed, 0 insertions, 132 deletions
diff --git a/files/fr/web/css/pseudo-éléments/index.html b/files/fr/web/css/pseudo-éléments/index.html deleted file mode 100644 index 4f9ce9eeb9..0000000000 --- a/files/fr/web/css/pseudo-éléments/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Pseudo-éléments -slug: Web/CSS/Pseudo-éléments -tags: - - CSS - - Pseudo-element - - Reference - - Sélecteur -translation_of: Web/CSS/Pseudo-elements ---- -<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> |