:in-range CSS sélecteur

Définition de la CSS :in-range.

La pseudo-classe de Limite CSS :in-range permet de cibler tous les éléments (X)HTML de formulaire dont la valeur est comprise entre la valeur de son attribut min et la valeur de son attribut max, afin de lui assigner des propriétés CSS.
La pseudo-classe de Limite CSS :in-range fonctionne aussi, si l'élément n'a qu'un attribut min ou max spécifié.

Exemple de syntaxe CSS :in-range :
:in-range {
  /* Propriétés */
}
identifiant:in-range {
  /* Propriétés */
}

Conditions d'application de la CSS :in-range.

La pseudo-classe de Limite CSS :in-range s'applique sur les éléments INPUT acceptant les attributs min ou max et ayant au moins un ces attributs déclaré et dont l'attribut ou la propriété disabled ou readonly n'est pas activé.

La pseudo-classes de feuille de style :in-range CSS ne peut pas se déclarer dans l'attribut HTML ou XHTML STYLE.
La pseudo-classes CSS :in-range doit être déclarée dans une balise HTML ou XHTML .

Problème d'interprétation de :in-range en Css.

La pseudo-classe de Limite CSS :in-range peut poser des problème sur les anciens navigateurs, car elle prend en compte les éléments dont le disabled = true et readonly = true.

Règles de syntaxes CSS pour :in-range.

Attention à l'écriture de la pseudo-classe de Limite CSS :in-range

Attention, la pseudo-classe CSS ":in-range" a une écriture un peu spéciale, "in-range" est toujours précédée de ":".

Dans le cas ci-dessous, l'identifiant est collé à ":". Dans ce cas, nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML qui ont "identifiant".

Code CSS :
.identifiant:in-range{ /* Propriétés css */ }
#identifiant:in-range{ /* Propriétés css */ }

Dans le cas ci-dessous, l'identifiant est espacé de ":". Dans ce cas nous demandons d'appliquer les propriétés sur les éléments HTML ou XHTML dont le parent direct ou indirect est "identifiant".

Exemple de code :
.identifiant :in-range{ /* Propriétés css */ } #identifiant :in-range{ /* Propriétés css */ }

Vous pouvez donc si nécessaire mettre un sélecteur devant pour un ciblage plus précis, sinon les propriétés seront appliquées à l'ensemble des éléments HTML ou XHTML acceptant :in-range.

Où écrire la pseudo-classe de Limite CSS :in-range

La pseudo-classe CSS :in-range ne peut pas être déclarée dans une balise HTML ou XHTML avec l'attribut HTML ou XHTML "STYLE" ou dans une feuille de style externe.
Elle se déclare dans une balise HTML ou XHTML "" de votre page :

Exemple d'écriture CSS :in-range dans une balise STYLE
<STYLE>
  input:in-range{}
</STYLE>

Compatibilités navigateurs du sélecteur :in-range

Votre avis sur la définition :in-range en CSS

Votez pour la définition CSS :in-range

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/in-range-css-selector.html Votes: 5 / 5 - 1 vote
Cliquez sur une étoile pour voter.