#id selector in CSS

The #id selector allows you to target an element by referencing the id HTML attribute.

ID attribute values should be unique. HTML with two or more identical ids does not validate, and will produce unpredictable results.

If there are two of the same, CSS will still match and style both. JavaScript however, when querying for an ID, will find the first and stop.

ID selectors are extremely powerful. They have a very high specificity.

A valid #id cannot start with a number and must be at least one character long. id attributes and selectors are case-sensitive, and must exactly match across HTML, CSS and JavaScript.

:is() pseudo selector in CSS

The pseudo-select :is() in CSS allows you to write compound selectors more effectively.

Simplifying selectors with :is() is similar to how CSS preprocessors handle nested rules.

The specificity of the :is() pseudo-class is replaced by the specificity of its most specific argument. Thus, a selector written with :is() does not necessarily have equivalent specificity to the equivalent selector written without :is().
if any part of a selector is invalid, the entire block is thrown out.

CSS :invalid & :valid pseudo selector

The :invalid selector allows you to select input elements that do not contain valid content, as determined by its type attribute. :invalid can be “chained” with other pseudo-selectors: like :focus to only validate when the user is typing, :before or :after to generate icons or text to provide more user feedback.

The :valid selector allows you to select input elements that contain valid content, as determined by its type attribute.

This selector has one particular use: providing a user with feedback while they are interacting with a form on the page.

CSS :indeterminate pseudo selector

:indeterminate is a pseudo-class selector in CSS named for a state that is neither checked nor unchecked.
It’s that in-between state that we might consider the “Maybe” between “Yes” and “No” options. The state is not fully determined, hence the name: indeterminate.

there is no way to set a checkbox to an indeterminate state in HTML.
:indeterminate can apply to radio buttons at the group level, where the entire group is considered to be in an indeterminate state if no option is selected.

CSS :in-range pseudo selector

The :in-range pseudo selector in CSS matches input elements when their value is within the range specified as being acceptable.

It is part of the CSS Selectors Level 4 specification which is currently in Editor’s Draft status.

it’s only relevant on input[type=number], range inputs don’t allow values outside their min/max and it doesn’t make much sense on any other type of input.