CSS Selector Level 4 » Range pseudo-class

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.

Try example in CodePen

Browser support

Platform Chrome Firefox Safari Edge Internet Explorer Opera
Desktop Yes (10.0) Yes (29.0) Yes (5.1) Yes (13.0) No Yes (10.1)
Mobile Yes (2.3) Yes (29.0) Yes (5.1) Yes (13.0) No Yes (12.0)

Usage statistics (Alexa Top 500,000 sites)


Please wait a moment, the comments start loading now...
explorermozillachromesafariopera