In Range
Pseudo-class:in-rangeSelects input elements whose value is within the specified min/max range.
Example
input:in-range {
border-color: green;
}Specificity
0-1-0
Browser Support
All browsers
About the In Range
The :in-range CSS selector belongs to the Pseudo-class category.Selects input elements whose value is within the specified min/max range. Understanding CSS selector specificity and combinators is essential for writing maintainable stylesheets that behave predictably.
The specificity of this selector is 0-1-0. CSS specificity determines which styles are applied when multiple rules target the same element. Higher specificity values take precedence. The specificity hierarchy from lowest to highest is: universal (*) → type/element → class/attribute/pseudo-class → ID → inline styles → !important.
Browser support for In Range is: All browsers. When using newer CSS selectors like :has(), :is(), or CSS nesting, consider providing fallback styles for older browsers. Use @supports to progressively enhance your stylesheets with modern features while maintaining backward compatibility.