The pseudo-class validity is the selector for elements with range limitations. :in-range would match the elements with a value inside the specified range while :out-of-range would match the elements which are outside the given range.
# Syntax
Copy
:in-range {
/* declarations */
}
:out-of-range {
/* declarations */
}
# Example
Copy
:in-range {
border-color: green;
}
:out-of-range {
border-color: red;
}
The mentioned example would set the border-color to red if the value is out-of-range, otherwise the element is going to have a green border.
# Browser support
Platform
Chrome
Firefox
Safari
Edge
Internet Explorer
Opera
Desktop
Yes (10)
Yes (29)
Yes (5.1)
Yes (13)
No
Yes (10.1)
Mobile
Yes (2.3)
Yes (29)
Yes (5.1)
Yes (13)
No
Yes (12)
For future browser support information, also check out caniuse.com (Range pseudo-class).
# Usage statistics (Alexa Top 1,250,000 sites)
Due to an extreme price increase of our statistics provider the data collection was stopped in September 2018.
Please wait a moment, the comments start loading now...