aboutsummaryrefslogtreecommitdiff
path: root/files/fr/web/css/_colon_in-range
diff options
context:
space:
mode:
authorjulieng <julien.gattelier@gmail.com>2021-09-17 20:59:20 +0200
committerSphinxKnight <SphinxKnight@users.noreply.github.com>2021-10-12 07:57:33 +0200
commit258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch)
treea8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/_colon_in-range
parent149319bb8c7b1394a443f0877c3460cd362aa815 (diff)
downloadtranslated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2
translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip
convert content to md
Diffstat (limited to 'files/fr/web/css/_colon_in-range')
-rw-r--r--files/fr/web/css/_colon_in-range/index.md111
1 files changed, 48 insertions, 63 deletions
diff --git a/files/fr/web/css/_colon_in-range/index.md b/files/fr/web/css/_colon_in-range/index.md
index b8c69639c9..0ac6b479b0 100644
--- a/files/fr/web/css/_colon_in-range/index.md
+++ b/files/fr/web/css/_colon_in-range/index.md
@@ -7,32 +7,33 @@ tags:
- Reference
translation_of: Web/CSS/:in-range
---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
-<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:in-range</code></strong> cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.</p>
+La [pseudo-classe](/fr/docs/Web/CSS/Pseudo-classes) **`:in-range`** cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.
-<pre class="brush: css no-line-numbers">/* Cible n'importe quel élément &lt;input&gt; */
+```css
+/* Cible n'importe quel élément <input> */
/* qui possède un intervalle et pour le- */
/* quel la valeur est dans cet intervalle */
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
-}</pre>
+}
+```
-<p>Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.</p>
+Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.
-<div class="note">
- <p><strong>Note :</strong> Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme <em>dans l'intervalle</em> ou <em>en dehors de l'intervalle</em>.</p>
-</div>
+> **Note :** Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme _dans l'intervalle_ ou _en dehors de l'intervalle_.
-<h2 id="Syntaxe">Syntaxe</h2>
+## Syntaxe
{{csssyntax}}
-<h2 id="Exemples">Exemples</h2>
+## Exemples
-<h3 id="CSS">CSS</h3>
+### CSS
-<pre class="brush: css">li {
+```css
+li {
list-style: none;
margin-bottom: 1em;
}
@@ -51,54 +52,38 @@ input:in-range + label::after {
}
input:out-of-range + label::after {
content:' non autorisée !';
-}</pre>
-
-<h3 id="HTML">HTML</h3>
-
-<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
- &lt;ul&gt;Les valeurs entre 1 et 10 sont valides.
- &lt;li&gt;
- &lt;input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12"&gt;
- &lt;label for="valeur1"&gt;Votre valeur est &lt;/label&gt;
- &lt;/li&gt;
- &lt;/ul&gt;
-&lt;/form&gt;</pre>
-
-<h3 id="Résultat">Résultat</h3>
-
-<div>{{EmbedLiveSample('Exemples',600,140)}}</div>
-
-<h2 id="Spécifications">Spécifications</h2>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Spécification</th>
- <th scope="col">Etat</th>
- <th scope="col">Commentaires</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}</td>
- <td>{{Spec2('HTML WHATWG')}}</td>
- <td>Définition de la correspondance entre <code>:in-range</code> et les éléments HTML.</td>
- </tr>
- <tr>
- <td>{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}</td>
- <td>{{Spec2('CSS4 Selectors')}}</td>
- <td>Définition initiale.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
-
-<p>{{Compat("css.selectors.in-range")}}</p>
-
-<h2 id="Voir_aussi">Voir aussi</h2>
-
-<ul>
- <li>{{cssxref(":out-of-range")}}</li>
- <li><a href="/fr/docs/Learn/Forms/Form_validation">Guide de validation pour les données de formulaire</a></li>
-</ul>
+}
+```
+
+### HTML
+
+```html
+<form action="" id="form1">
+ <ul>Les valeurs entre 1 et 10 sont valides.
+ <li>
+ <input id="valeur1" name="valeur1" type="number" placeholder="de 1 à 10" min="1" max="10" value="12">
+ <label for="valeur1">Votre valeur est </label>
+ </li>
+ </ul>
+</form>
+```
+
+### Résultat
+
+{{EmbedLiveSample('Exemples',600,140)}}
+
+## Spécifications
+
+| Spécification | Etat | Commentaires |
+| ---------------------------------------------------------------------------------------------------- | ------------------------------------ | ----------------------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}} | {{Spec2('HTML WHATWG')}} | Définition de la correspondance entre `:in-range` et les éléments HTML. |
+| {{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}} | {{Spec2('CSS4 Selectors')}} | Définition initiale. |
+
+## Compatibilité des navigateurs
+
+{{Compat("css.selectors.in-range")}}
+
+## Voir aussi
+
+- {{cssxref(":out-of-range")}}
+- [Guide de validation pour les données de formulaire](/fr/docs/Learn/Forms/Form_validation)