Css style

How CSS pseudo-class selectors :is, :where and :has work

CSS selectors let you choose elements by type, attributes, or location in the HTML document. This tutorial explains three new options — :is(), :where(), and :has().

Selectors are commonly used in style sheets. The following example locates all

paragraph elements and changes the font weight to bold:

p {
  font-weight: bold;

You can also use selectors in JavaScript to locate DOM nodes:

Pseudo-class selectors target HTML elements based on their current state. Perhaps the best known is :hover, which applies styles when the cursor moves over an element, so it’s used to highlight clickable links and buttons. Other popular options include:

  • :visited: corresponds to visited links
  • :target: corresponds to an element targeted by a document URL
  • :first-child: targets the first child element
  • :nth-child: selects specific child elements
  • :empty: corresponds to an element without content or child element
  • :checked: corresponds to an activated check box or radio button
  • :blank: styles an empty input field
  • :enabled: corresponds to an activated edit control
  • :disabled: corresponds to a disabled input field
  • :required: targets a mandatory input field
  • :valid: corresponds to a valid input field
  • :invalid: corresponds to an invalid input field
  • :playing: targets an audio or video element currently playing

Browsers recently received three more pseudo-class selectors…

The CSS: is a pseudo-class selector

Note: This was originally specified as :matches() and :any()but :is() has become the CSS standard.

You often need to apply the same style to multiple elements. For instance,

paragraph text is black by default, but gray when it appears in a