CSS :in-range Pseudo Class

❮ Prev Next ❯

The :in-range pseudo-class selects all elements with a value that is within a specified range. It applies to elements having or taking a range limitation. If this limitation is absent, the element can not be “in-range” or “out-of-range”.

The :in-range pseudo-class can be linked with other pseudo-classes (e.g., :hover).

The :in-range selector only works for <input> elements with min and/or max attributes.

Version

HTML Living Standard

Selectors Level 4

Syntax

:in-range {
  css declarations;
}

Example of the :in-range pseudo-class:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:in-range {
        border: 2px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>:in-range selector example</h2>
    <form>
      <input type="number" min="1" max="10" value="5">
    </form>
  </body>
</html>

Try it Yourself »

Browser support


10.0+	✓	29.0+	✓	11.0+

Practice Your Knowledge

What is the purpose of the :in-range pseudo-class in CSS?

It is used to style input elements with type range when the current value is between the min and max.

It is used to style elements when the mouse hovers over them.

It is used to style input elements when they are disabled.

It is used to select and style an element that has a specific parent.

It is used to style input elements with type range when the current value is outside the min and max.

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

CSS Basics

❮ Prev Next ❯

Do you find this helpful?