Marusya's School Notes

The :In-Range Pseudo-Class

The :in-range selector selects all elements with a value that is within a specified range. This selector only works for elements with range limitations, such as input elements with min and max attributes. In this example the selector will select and style only if the value of the <input> element is "in range":

HTML file:	Displayed by browser:
<style> input:in-range { border: 2px solid yellow; } </style> <body> <h3>A demonstration of the :in-range selector.</h3> <input type="number" min="5" max="10" value="7"> <p>Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p> </body>	A demonstration of the :in-range selector. Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.

HTML file:

Displayed by browser:

<body>
<h3>A demonstration of the :in-range selector.</h3>
<input type="number" min="5" max="10" value="7">
<p>Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.</p>
</body>

A demonstration of the :in-range selector.

Try typing a number out of range (less than 5 or higher than 10), to see the styling disappear.

Use the :out-of-range selector to select all elements with a value that is outside a specified range. Note: The :in-range selector is not supported in Internet Explorer.