Marusya's School Notes

The :Out-of-Range Pseudo-Class

The :out-of-range selector selects all elements with a value that is outside a specified range. Note: The :out-of-range selector only works for elements with range limitations, such as input elements with min and max attributes. In this demonstration, the selector selects and styles only if the <input> element is "out of range":

HTML file:	Displayed by browser:
<style> input:out-of-range { border: 2px solid red; } </style> <body> <h3>A demonstration of the :out-of-range selector.</h3> <input type="number" min="5" max="10" value="17"> <p>Try typing a number within the given range (between 5 and 10), to see the styling disappear.</p> </body>	A demonstration of the :out-of-range selector. Try typing a number within the given range (between 5 and 10), to see the styling disappear.

HTML file:

Displayed by browser:

<body>
<h3>A demonstration of the :out-of-range selector.</h3>
<input type="number" min="5" max="10" value="17">
<p>Try typing a number within the given range (between 5 and 10), to see the styling disappear.</p>
</body>

A demonstration of the :out-of-range selector.

Try typing a number within the given range (between 5 and 10), to see the styling disappear.

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