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

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.

- -
/* cible n'importe quel bouton radio sélectionné, case
-/* à cocher cochée ou option sélectionnée */
-input:checked {
-  margin-left: 25px;
-  border: 1px solid blue;
-}
-
- -
-

Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

Exemple simple

- -

HTML

- -
-<div>
-  <input type="radio" name="my-input" id="yes">
-  <label for="yes">Oui</label>
-
-  <input type="radio" name="my-input" id="no">
-  <label for="no">Non</label>
-</div>
-
-<div>
-  <input type="checkbox" name="my-checkbox" id="opt-in">
-  <label for="opt-in">Cochez-moi !</label>
-</div>
-
-<select name="my-select" id="fruit">
-  <option value="opt1">Pommes</option>
-  <option value="opt2">Raisins</option>
-  <option value="opt3">Poires</option>
-</select>
-
- -

CSS

- -
-div,
-select {
-  margin: 8px;
-}
-
-/* Libellés pour les entrées cochées */
-input:checked + label {
-  color: red;
-}
-
-/* Éléments radio cochés */
-input[type="radio"]:checked {
-  box-shadow: 0 0 0 3px orange;
-}
-
-/* Éléments cases à cocher cochés */
-input[type="checkbox"]:checked {
-  box-shadow: 0 0 0 3px hotpink;
-}
-
-/* Éléments options sélectionnés */
-option:checked {
-  box-shadow: 0 0 0 3px lime;
-  color: red;
-}
-
- -

Résultat

- -

{{EmbedLiveSample("exemple_simple")}}

- -

Spécifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}{{Spec2('HTML5 W3C')}}La sémantique relative au HTML est définie.
{{SpecName('CSS4 Selectors', '#checked', ':checked')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}{{Spec2('CSS3 Basic UI')}}Lien avec la spécification de niveau 3 pour les sélecteurs.
{{SpecName('CSS3 Selectors', '#checked', ':checked')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
- -

Compatibilité des navigateurs

- -

{{Compat("css.selectors.checked")}}

diff --git a/files/fr/web/css/_colon_checked/index.md b/files/fr/web/css/_colon_checked/index.md new file mode 100644 index 0000000000..fba13cef19 --- /dev/null +++ b/files/fr/web/css/_colon_checked/index.md @@ -0,0 +1,132 @@ +--- +title: ':checked' +slug: Web/CSS/:checked +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:checked +--- +
{{CSSRef}}
+ +

La pseudo-classe :checked représente n'importe quel bouton radio (<input type="radio">), case à cocher (<input type="checkbox">) ou option ({{HTMLElement("option")}} d'un élément {{HTMLElement("select")}}) qui est coché ou activé (on). L'utilisateur peut modifier cet état en cliquant sur l'élément ou en sélectionnant une valeur différente auquel cas la pseudo-classe :checked ne s'applique plus à l'élément en question.

+ +
/* cible n'importe quel bouton radio sélectionné, case
+/* à cocher cochée ou option sélectionnée */
+input:checked {
+  margin-left: 25px;
+  border: 1px solid blue;
+}
+
+ +
+

Note : Les navigateurs considèrent souvent les éléments <option> comme des éléments remplacéset la possibilité de mise en forme avec :checked varie d'un navigateur à l'autre.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

Exemple simple

+ +

HTML

+ +
+<div>
+  <input type="radio" name="my-input" id="yes">
+  <label for="yes">Oui</label>
+
+  <input type="radio" name="my-input" id="no">
+  <label for="no">Non</label>
+</div>
+
+<div>
+  <input type="checkbox" name="my-checkbox" id="opt-in">
+  <label for="opt-in">Cochez-moi !</label>
+</div>
+
+<select name="my-select" id="fruit">
+  <option value="opt1">Pommes</option>
+  <option value="opt2">Raisins</option>
+  <option value="opt3">Poires</option>
+</select>
+
+ +

CSS

+ +
+div,
+select {
+  margin: 8px;
+}
+
+/* Libellés pour les entrées cochées */
+input:checked + label {
+  color: red;
+}
+
+/* Éléments radio cochés */
+input[type="radio"]:checked {
+  box-shadow: 0 0 0 3px orange;
+}
+
+/* Éléments cases à cocher cochés */
+input[type="checkbox"]:checked {
+  box-shadow: 0 0 0 3px hotpink;
+}
+
+/* Éléments options sélectionnés */
+option:checked {
+  box-shadow: 0 0 0 3px lime;
+  color: red;
+}
+
+ +

Résultat

+ +

{{EmbedLiveSample("exemple_simple")}}

+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpécificationÉtatCommentaires
{{SpecName('HTML WHATWG', '#selector-checked', ':checked')}}{{Spec2('HTML WHATWG')}}Aucune modification.
{{SpecName('HTML5 W3C', '#selector-checked', ':checked')}}{{Spec2('HTML5 W3C')}}La sémantique relative au HTML est définie.
{{SpecName('CSS4 Selectors', '#checked', ':checked')}}{{Spec2('CSS4 Selectors')}}Aucune modification.
{{SpecName('CSS3 Basic UI', '#pseudo-checked', ':checked')}}{{Spec2('CSS3 Basic UI')}}Lien avec la spécification de niveau 3 pour les sélecteurs.
{{SpecName('CSS3 Selectors', '#checked', ':checked')}}{{Spec2('CSS3 Selectors')}}Définition de la pseudo-classe mais pas de la sémantique associée.
+ +

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.checked")}}

-- cgit v1.2.3-54-g00ecf