CSS : La pseudo-classe :in-range

La pseudo-classe `:in-range` sélectionne tous les éléments dont la valeur se situe dans une plage spécifiée. Elle s'applique aux éléments prenant en charge les attributs de plage. Si cette limitation est absente, l'élément ne peut pas être « dans la plage » ou « hors de la plage ». Pour plus de détails, consultez la pseudo-classe :out-of-range.

La pseudo-classe `:in-range` peut être associée à d'autres pseudo-classes (par exemple, :hover).

INFO

Le sélecteur `:in-range` ne fonctionne que pour les éléments <input> possédant les attributs min et/ou max, tels que type="number", type="range" ou type="date".

Version

HTML Living Standard

Selectors Level 4

Syntaxe

Exemple de syntaxe CSS :in-range

css

:in-range {
  css declarations;
}

Exemple de la pseudo-classe `:in-range` :

Exemple de code CSS :in-range

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:in-range {
        border: 2px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>:in-range selector example</h2>
    <form>
      <input type="number" min="1" max="10" value="5" />
    </form>
  </body>
</html>

Try it Yourself »

Practice

Quelle est l'utilité de la pseudo-classe :in-range en CSS ?

Elle permet de styliser les éléments input de type range lorsque la valeur actuelle est comprise entre min et max.Elle permet de styliser les éléments lorsque la souris survole ceux-ci.Elle permet de styliser les éléments input lorsqu'ils sont désactivés.Elle permet de sélectionner et de styliser un élément qui possède un parent spécifique.Elle permet de styliser les éléments input de type range lorsque la valeur actuelle est en dehors de min et max.

CSS : La pseudo-classe :in-range ​

Version ​

Syntaxe ​

Exemple de la pseudo-classe `:in-range` : ​

Practice ​

CSS : La pseudo-classe :in-range

Version

Syntaxe

Exemple de la pseudo-classe `:in-range` :

Practice