How the CSS :is, :where and :has Pseudo-class Selectors Work

Key Takeaways

• The CSS pseudo-class selectors :is(), :where(), and :has() provide new ways to target HTML elements. The :is() selector allows for more efficient styling of multiple elements, reducing the need for verbose selector strings. The :where() selector operates similarly to :is(), but with zero specificity, making it useful for applying baseline styles without increasing specificity. The :has() selector targets an element containing a set of others, providing a long-awaited way to target parent elements.
• The :is() and :where() pseudo-class selectors are supported in all modern browsers, but not in Internet Explorer. The :has() selector is newer with limited support currently, but is expected to be widely available by 2023. Using these selectors can simplify CSS syntax and reduce the need for CSS preprocessors.
• The specificity of :is() and :where() selectors differ. The :is() selector has the same specificity as the most specific selector within its arguments, while the :where() selector has zero specificity. This can be practical for CSS resets, which apply a baseline of styles when no specific styling is available, allowing for override of any CSS reset style regardless of the specificity.

CSS selectors allow you to choose elements by type, attributes, or location within the HTML document. This tutorial explains three new options — :is(), :where(), and :has(). Selectors are commonly used in stylesheets. The following example locates all

paragraph elements and changes the font weight to bold:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

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

• document.querySelector() returns the first matching HTML element
• document.querySelectorAll() returns all matching HTML elements in an array-like NodeList

Pseudo-class selectors target HTML elements based on their current state. Perhaps the most well 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: matches visited links
• :target: matches an element targeted by a document URL
• :first-child: targets the first child element
• :nth-child: selects specific child elements
• :empty: matches an element with no content or child elements
• :checked: matches a toggled-on checkbox or radio button
• :blank: styles an empty input field
• :enabled: matches an enabled input field
• :disabled: matches a disabled input field
• :required: targets a required input field
• :valid: matches a valid input field
• :invalid: matches an invalid input field
• :playing: targets a playing audio or video element

Browsers have recently received three more pseudo-class selectors…

The CSS :is 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 styling to more than one element. For example,

paragraph text is black by default, but gray when it appears within an

,

, or

:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

This is a simple example, but more sophisticated pages will lead to more complicated and verbose selector strings. A syntax error in any selector could break styling for all elements. CSS preprocessors such as Sass permit nesting (which is also coming to native CSS):

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

This creates identical CSS code, reduces typing effort, and can prevent errors. But:

• Until native nesting arrives, you’ll need a CSS build tool. You may want to use an option like Sass, but that can introduce complications for some development teams.
• Nesting can cause other problems. It’s easy to construct deeply nested selectors that become increasingly difficult to read and output verbose CSS.

:is() provides a native CSS solution which has full support in all modern browsers (not IE):

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

A single selector can contain any number of :is() pseudo-classes. For example, the following complex selector applies a green text color to all

,

, and

elements that are children of a

which has a class of .primary or .secondary and which isn’t the first child of an

:

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

The equivalent code without :is() required six CSS selectors:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

Note that :is() can’t match ::before and ::after pseudo-elements, so this example code will fail:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

The CSS :where Pseudo-class Selector

:where() selector syntax is identical to :is() and is also supported in all modern browsers (not IE). It will often result in identical styling. For example:

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

The difference is specificity. Specificity is the algorithm used to determine which CSS selector should override all others. In the following example, article p is more specific than p alone, so all paragraph elements within an

will be gray:

<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

In the case of :is(), the specificity is the most specific selector found within its arguments. In the case of :where(), the specificity is zero. Consider the following CSS:

<span>article p { color: #444; }
</span><span>p { color: #000; }
</span>

Let’s apply this CSS to the following HTML:

<span>article p {
</span>  <span>color: black;
</span><span>}
</span>
<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>:where(article, section, aside) p</span> {
</span>  <span>color: blue;
</span><span>}
</span>

The paragraph text will be colored red, as shown in the following CodePen demo.

See the Pen Using the :is selector by SitePoint (@SitePoint) on CodePen.

The :is() selector has the same specificity as article p, but it comes later in the stylesheet, so the text becomes red. It’s necessary to remove both the article p and :is() selectors to apply a blue color, because the :where() selector is less specific than either. More codebases will use :is() than :where(). However, the zero specificity of :where() could be practical for CSS resets, which apply a baseline of standard styles when no specific styling is available. Typically, resets apply a default font, color, paddings and margins. This CSS reset code applies a top margin of 1em to

headings unless they’re the first child of an

element:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

Attempting to set a custom

top margin later in the stylesheet has no effect, because article :first-child has a higher specificity:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

You can fix this using a higher-specificity selector, but it’s more code and not necessarily obvious to other developers. You’ll eventually forget why you required it:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

You can also fix the problem by applying !important to each style, but please avoid doing that! It makes further styling and development considerably more challenging:

<span><span>:is(article, section, aside) p</span> {
</span>  <span>color: #444;
</span><span>}
</span>

A better choice is to adopt the zero specificity of :where() in your CSS reset:

<span>article section<span>:not(:first-child):is(.primary, .secondary) :is(h1, h2, p)</span> {
</span>  <span>color: green;
</span><span>}
</span>

You can now override any CSS reset style regardless of the specificity; there’s no need for further selectors or !important:

<span>article section<span>.primary:not(:first-child) h1,
</span></span><span>article section<span>.primary:not(:first-child) h2,
</span></span><span>article section<span>.primary:not(:first-child) p,
</span></span><span>article section<span>.secondary:not(:first-child) h1,
</span></span><span>article section<span>.secondary:not(:first-child) h2,
</span></span><span>article section<span>.secondary:not(:first-child) p</span> {
</span>  <span>color: green;
</span><span>}
</span>

The CSS :has Pseudo-class Selector

The :has() selector uses a similar syntax to :is() and :where(), but it targets an element which contains a set of others. For example, here’s the CSS for adding a blue, two-pixel border to any link that contains one or more or

tags:

<span>/* NOT VALID - selector will not work */
</span><span>div<span>:is(::before, ::after)</span> {
</span>  <span>display: block;
</span>  <span>content: '';
</span>  <span>width: 1em;
</span>  <span>height: 1em;
</span>  <span>color: blue;
</span><span>}
</span>

This is the most exciting CSS development in decades! Developers finally have a way to target parent elements! The elusive “parent selector” has been one of the most requested CSS features, but it raises performance complications for browser vendors, and therefor has been a long time coming. In simplistic terms:

• Browsers apply CSS styles to an element when it’s drawn on the page. The whole parent element must therefore be re-drawn when adding further child elements.
• Adding, removing, or modifying elements in JavaScript could affect the styling of the whole page right up to the enclosing .

Assuming the vendors have resolved performance issues, the introduction of :has() permits possibilities that would have been impossible without JavaScript in the past. For example, you can set the styles of an outer form

and the following submit button when any required inner field is not valid:

<span>p {
</span>  <span>font-weight: bold;
</span><span>}
</span>

This example adds a navigation link submenu indicator that contains a list of child menu items:

<span>/* default black */
</span><span>p {
</span>  <span>color: #000;
</span><span>}
</span>
<span>/* gray in <article>, <section>, or <aside> */
</span><span>article p<span>,
</span></span><span>section p<span>,
</span></span><span>aside p {
</span>  <span>color: #444;
</span><span>}
</span>

Or perhaps you could add debugging styles, such as highlighting all

elements without an inner img:

<span>article, section, aside {
</span>
  <span>p {
</span>    <span>color: #444;
</span>  <span>}
</span>
<span>}
</span>

Before you jump into your editor and refactor your CSS codebase, please be aware that :has() is new and support is more limited than for :is() and :where(). It’s available in Safari 15.4 and Chrome 101 behind an experimental flag, but it should be widely available by 2023.

Selector Summary

The :is() and :where() pseudo-class selectors simplify CSS syntax. You’ll have less need for nesting and CSS preprocessors (although those tools provide other benefits such as partials, loops, and minification). :has() is considerably more revolutionary and exciting. Parent selection will rapidly become popular, and we’ll forget about the dark times! We’ll publish a full :has() tutorial when it’s available in all modern browsers. If you’d like to dig in deeper to CSS pseudo-class selectors — along with all other things CSS, such as Grid and Flexbox — check out the awesome book CSS Master, by Tiffany Brown.

Frequently Asked Questions (FAQs) about CSS :is() and :where() Pseudo-Class Selectors

What is the main difference between :is() and :where() pseudo-class selectors in CSS?

The primary difference between :is() and :where() pseudo-class selectors in CSS lies in their specificity. The :is() pseudo-class selector has the same specificity as the selector placed inside it. On the other hand, the :where() pseudo-class selector has zero specificity, meaning it doesn’t contribute to the overall specificity of a selector. This can be particularly useful when you want to apply styles to a group of elements without increasing the specificity.

Can I use :is() and :where() pseudo-class selectors with all CSS properties?

Yes, you can use :is() and :where() pseudo-class selectors with all CSS properties. These pseudo-class selectors are not tied to specific CSS properties. They are used to select elements based on certain conditions, and you can apply any CSS property to the selected elements.

Are :is() and :where() pseudo-class selectors supported in all browsers?

The :is() and :where() pseudo-class selectors are relatively new additions to CSS and are supported in most modern browsers. However, they may not be supported in older browsers or some versions of Internet Explorer. It’s always a good idea to check the current browser support on a site like Can I Use before using these selectors in your code.

How can I use the :is() pseudo-class selector in CSS?

The :is() pseudo-class selector in CSS allows you to group multiple selectors into one. For example, instead of writing three separate selectors for h1, h2, and h3, you can group them together using the :is() pseudo-class selector like this: :is(h1, h2, h3) { color: blue; }.

How can I use the :where() pseudo-class selector in CSS?

The :where() pseudo-class selector in CSS is used in the same way as the :is() pseudo-class selector, but it has zero specificity. For example, you can use it to select all elements with a certain class without increasing the specificity: :where(.class1, .class2, .class3) { color: blue; }.

Can I nest :is() and :where() pseudo-class selectors?

Yes, you can nest :is() and :where() pseudo-class selectors. This can be useful when you want to select elements that meet multiple conditions. For example, you can select all h1 and h2 elements inside a div element like this: div :is(h1, h2) { color: blue; }.

Can I use :is() and :where() pseudo-class selectors with pseudo-elements?

Yes, you can use :is() and :where() pseudo-class selectors with pseudo-elements. For example, you can select all first letters of h1 and h2 elements like this: :is(h1, h2)::first-letter { color: blue; }.

Can I use :is() and :where() pseudo-class selectors with attribute selectors?

Yes, you can use :is() and :where() pseudo-class selectors with attribute selectors. For example, you can select all elements with a data-attribute like this: :is([data-attribute]) { color: blue; }.

Can I use :is() and :where() pseudo-class selectors with class selectors?

Yes, you can use :is() and :where() pseudo-class selectors with class selectors. For example, you can select all elements with a certain class like this: :is(.class1, .class2, .class3) { color: blue; }.

Can I use :is() and :where() pseudo-class selectors with id selectors?

Yes, you can use :is() and :where() pseudo-class selectors with id selectors. For example, you can select all elements with a certain id like this: :is(#id1, #id2, #id3) { color: blue; }.

The above is the detailed content of How the CSS :is, :where and :has Pseudo-class Selectors Work. For more information, please follow other related articles on the PHP Chinese website!