# in-range pseudo-class

The `in-range` pseudo-class sets a style for elements whose values ​​are set in a specified range. The range of values ​​must be specified with the `min` and `max` attributes.

## Syntax

`selector:in-range { }`

## Example

Let's set a blue color for the background of the input, which contains numbers that fall in the range from `1` to `5`. We will also set a pink background when the entered value does not fall within the selected range:

`<form> <p>Enter number from 1 to 5</p> <p> <input type="number" min="1" max="5" value="1"> </p> </form>` `input:in-range { background: #C2DDFD; } input:out-of-range { background: #E37D76; }`

:

## See also

- the `:out-of-range` pseudo-class
  that styles elements whose values ​​are out of range
- the `:valid` pseudo-class
  that sets a style for the input into which a valid value was entered
- the `:invalid` pseudo-class
  that sets a style for the input into which an invalid value was entered

← →
↑
en ru