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-classes/index.html | 203 ----------------------------- files/fr/web/css/pseudo-classes/index.md | 203 +++++++++++++++++++++++++++++ 2 files changed, 203 insertions(+), 203 deletions(-) delete mode 100644 files/fr/web/css/pseudo-classes/index.html create mode 100644 files/fr/web/css/pseudo-classes/index.md (limited to 'files/fr/web/css/pseudo-classes') diff --git a/files/fr/web/css/pseudo-classes/index.html b/files/fr/web/css/pseudo-classes/index.html deleted file mode 100644 index 22ba65100c..0000000000 --- a/files/fr/web/css/pseudo-classes/index.html +++ /dev/null @@ -1,203 +0,0 @@ ---- -title: Pseudo-classes -slug: Web/CSS/Pseudo-classes -tags: - - CSS - - Intermédiaire - - Pseudo-classe - - Reference - - Sélecteur -translation_of: Web/CSS/Pseudo-classes ---- -
{{CSSRef}}
- -

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).

- -
div:hover {
-  background-color: #F89B4D;
-}
- -

Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).

- -
-

Note : À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.

-
- -

Syntaxe

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

À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.

- -

Liste des pseudo-classes standards

- - - -

Exemples

- -

CSS

- -
.survol:hover {
-  background-color: palegreen;
-}
-
-p:nth-child(2n+1) {
-  background-color: lime;
-}
- -

HTML

- -
<div>
-  <p class="survol">
-    La Reine devint pourpre de colère ; et après
-    l’avoir considérée un moment avec des yeux
-    flamboyants comme ceux d’une bête fauve, elle
-    se mit à crier : « Qu’on lui coupe la tête ! »
-  </p>
-  <p>
-    « Quelle idée ! » dit Alice très-haut et d’un
-    ton décidé. La Reine se tut.
-  </p>
-  <p>
-    Le Roi lui posa la main sur le bras, et lui
-    dit timidement : « Considérez donc, ma chère
-    amie, que ce n’est qu’une enfant. »
-  </p>
-</div>
- -

Résultat

- -

{{EmbedLiveSample("Exemples","250","350")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('Fullscreen')}}{{Spec2('Fullscreen')}}Définition de :fullscreen.
{{SpecName('HTML WHATWG', '#pseudo-classes')}}{{Spec2('HTML WHATWG')}}Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} -

Définition de :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() et :matches().

- -

Changement afin que :empty se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.

- -

Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.

-
{{SpecName('HTML5 W3C')}}{{Spec2('HTML5 W3C')}}Copie les éléments pertinents de la spécification HTML WHATWG
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}}Définition de :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only et :read-write, mais sans la sémantique associée.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Définition de :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty et :not().
- Définition de la syntaxe pour :enabled, :disabled, :checked et :indeterminate, mais sans la sémantique associée.
- Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Définition de :lang(), :first-child, :hover et :focus.
- Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition de :link, :visited et :active, mais sans la sémantique associée.
- -

Voir aussi

- - diff --git a/files/fr/web/css/pseudo-classes/index.md b/files/fr/web/css/pseudo-classes/index.md new file mode 100644 index 0000000000..22ba65100c --- /dev/null +++ b/files/fr/web/css/pseudo-classes/index.md @@ -0,0 +1,203 @@ +--- +title: Pseudo-classes +slug: Web/CSS/Pseudo-classes +tags: + - CSS + - Intermédiaire + - Pseudo-classe + - Reference + - Sélecteur +translation_of: Web/CSS/Pseudo-classes +--- +
{{CSSRef}}
+ +

Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe {{cssxref(":hover")}}, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).

+ +
div:hover {
+  background-color: #F89B4D;
+}
+ +

Les pseudo-classes permettent d'appliquer un style à un élément non seulement en fonction de son contenu dans l'arbre du document mais aussi en fonction de facteurs externes (l'historique de navigation par exemple avec {{cssxref(":visited")}} ; le statut du contenu avec {{cssxref(":checked")}} ; la position de la souris {{cssxref(":hover")}}).

+ +
+

Note : À la différence des pseudo-classes, les pseudo-éléments peuvent être utilisés afin d'appliquer un style sur une certaine partie d'un élément.

+
+ +

Syntaxe

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

À l'instar des classes, on peut chaîner plusieurs pseudo-classes au sein d'un sélecteur.

+ +

Liste des pseudo-classes standards

+ + + +

Exemples

+ +

CSS

+ +
.survol:hover {
+  background-color: palegreen;
+}
+
+p:nth-child(2n+1) {
+  background-color: lime;
+}
+ +

HTML

+ +
<div>
+  <p class="survol">
+    La Reine devint pourpre de colère ; et après
+    l’avoir considérée un moment avec des yeux
+    flamboyants comme ceux d’une bête fauve, elle
+    se mit à crier : « Qu’on lui coupe la tête ! »
+  </p>
+  <p>
+    « Quelle idée ! » dit Alice très-haut et d’un
+    ton décidé. La Reine se tut.
+  </p>
+  <p>
+    Le Roi lui posa la main sur le bras, et lui
+    dit timidement : « Considérez donc, ma chère
+    amie, que ce n’est qu’une enfant. »
+  </p>
+</div>
+ +

Résultat

+ +

{{EmbedLiveSample("Exemples","250","350")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('Fullscreen')}}{{Spec2('Fullscreen')}}Définition de :fullscreen.
{{SpecName('HTML WHATWG', '#pseudo-classes')}}{{Spec2('HTML WHATWG')}}Définit lorsque des sélecteurs particuliers correspondent à des éléments HTML.
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}} +

Définition de :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() et :matches().

+ +

Changement afin que :empty se comporte comme {{CSSxRef(":-moz-only-whitespace")}} {{Non-standard_Inline}}.

+ +

Aucune modification significative pour les pseudo-classes définies avec {{SpecName('CSS3 Selectors')}} et {{SpecName('HTML5 W3C')}}.

+
{{SpecName('HTML5 W3C')}}{{Spec2('HTML5 W3C')}}Copie les éléments pertinents de la spécification HTML WHATWG
{{SpecName('CSS3 Basic UI')}}{{Spec2('CSS3 Basic UI')}}Définition de :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only et :read-write, mais sans la sémantique associée.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Définition de :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty et :not().
+ Définition de la syntaxe pour :enabled, :disabled, :checked et :indeterminate, mais sans la sémantique associée.
+ Pas de modification significative pour les pseudo-classes définies avec {{SpecName('CSS2.1')}}.
{{SpecName('CSS2.1')}}{{Spec2('CSS2.1')}}Définition de :lang(), :first-child, :hover et :focus.
+ Aucune modification significative pour les pseudo-classes définies avec  {{SpecName('CSS1')}}.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Définition de :link, :visited et :active, mais sans la sémantique associée.
+ +

Voir aussi

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