:out-of-range

:out-of-range is a CSS pseudo-class used to style elements that have range limitations when the value that the element bound to is outside the specified range limits.

In other words, it matches an element when the value of its value attribute is outside the range limitations specified on it.

Any other element that does not have data range limitations or that is not a form control element can not be selected with :out-of-range.

Examples of elements with range limitations are sliders and inputs that accept a number as a value. For example:

<input type="number">
                

Such an input would have a range of acceptable values specified using the min and max attributes. The value attribute would hold the current value of the input.

<input type="number" min="1" max="10" value="8">
                

In this example, if the value exceeds the range limitations, the input will match the :out-of-range selector. The following will style the input when its value it outside the range limit:

input[type="number"]:out-of-range {
    /* styles here */
}
                

An element whose value is within the specified range can be selected and styled using the :in-range pseudo-class selector.

Trivia & Notes

Just like other pseudo-class selectors, the :out-of-range selector can be chained with other selectors such as :focus, for example, to provide focus styles for the element when its value is outside the allowed range limit. For example:

input:out-of-range:focus {
    border: 2px solid tomato;
}