: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.

CSS :hover pseudo selector

The :hover pseudo class in CSS selects elements when the mouse cursor is current over them.

It’s commonly associated with link (“Anchor”) elements.

In IE 6 and below, :hover used to only work on links, but in newer browsers, it works on any element. This can be particularly useful for things like dropdown menus in which you can wait for the :hover of a parent list item and then reveal the next level of the nested menu.