From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/pseudo-elements/index.html | 131 ---------------------------- files/fr/web/css/pseudo-elements/index.md | 131 ++++++++++++++++++++++++++++ 2 files changed, 131 insertions(+), 131 deletions(-) delete mode 100644 files/fr/web/css/pseudo-elements/index.html create mode 100644 files/fr/web/css/pseudo-elements/index.md (limited to 'files/fr/web/css/pseudo-elements') diff --git a/files/fr/web/css/pseudo-elements/index.html b/files/fr/web/css/pseudo-elements/index.html deleted file mode 100644 index e25886b602..0000000000 --- a/files/fr/web/css/pseudo-elements/index.html +++ /dev/null @@ -1,131 +0,0 @@ ---- -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 ---- -
{{CSSRef}}
- -

Un pseudo-élément 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.

- -
/* La première ligne de chaque élément <p>. */
-p::first-line {
-  color: blue;
-  text-transform: uppercase;
-}
-
- - - -
-

Note : À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

-
- -

Syntaxe

- -
sélecteur::pseudo-élément {
-  propriété: valeur;
-}
- -

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

- -

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 « : ».

- -

Liste des pseudo-éléments

- - - -

Exemples

- -

CSS

- -
p::first-line {
-  color: blue;
-}
- -

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

Résultat

- -

{{EmbedLiveSample('Exemples', 250, 200)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
- -

Voir aussi

- - diff --git a/files/fr/web/css/pseudo-elements/index.md b/files/fr/web/css/pseudo-elements/index.md new file mode 100644 index 0000000000..e25886b602 --- /dev/null +++ b/files/fr/web/css/pseudo-elements/index.md @@ -0,0 +1,131 @@ +--- +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 +--- +
{{CSSRef}}
+ +

Un pseudo-élément 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.

+ +
/* La première ligne de chaque élément <p>. */
+p::first-line {
+  color: blue;
+  text-transform: uppercase;
+}
+
+ + + +
+

Note : À la différence des pseudo-éléments, les pseudo-classes peuvent être utilisées afin de mettre en forme un élément en fonction de son état.

+
+ +

Syntaxe

+ +
sélecteur::pseudo-élément {
+  propriété: valeur;
+}
+ +

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

+ +

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 « : ».

+ +

Liste des pseudo-éléments

+ + + +

Exemples

+ +

CSS

+ +
p::first-line {
+  color: blue;
+}
+ +

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

Résultat

+ +

{{EmbedLiveSample('Exemples', 250, 200)}}

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NavigateurVersion minimalePrise en charge de :
Internet Explorer8.0:pseudo-element
9.0:pseudo-element ::pseudo-element
Firefox (Gecko)1.0 (1.0):pseudo-element
1.0 (1.5):pseudo-element ::pseudo-element
Opera4.0:pseudo-element
7.0:pseudo-element ::pseudo-element
Safari (WebKit)1.0 (85):pseudo-element ::pseudo-element
+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf