Pseudoklasa CSS :out-of-range wybiera wszystkie elementy input, które mogą mieć zakres dopuszczalnych wartości zdefiniowany przez atrybuty min i max oraz których obecna wartość nie mieści się w tym przedziale.
Odwrotnością pseudoklasy :out-of-range jest pseudoklasa :in-range.
Przykład użycia :in-range
W poniższym przykładzie element input typu number ma dopuszczalny przedział wartości od 10 do 20. Jeśli użytkownik wpisze liczbę mniejszą od 10 lub większą od 20, tło tego elementu zmieni kolor na czerwony.
<style>
:out-of-range {
background-color: red;
}
</style>
...
<input type="number" name="liczba" min="10" max="20">Efekt zastosowania tego kodu w oknie przeglądarki:
Składnia :out-of-range
Składnia pseudoklasy :out-of-range:
:out-of-range {...}