The CSS :has Selector (and 4 Examples)

The CSS :has() selector revolutionizes element selection by targeting parents based on their children's properties. It's more than just a "parent selector"—it offers powerful conditional styling capabilities. For instance, you can style <div> elements only if they contain a <code><p></p>:

div:has(p) {
  background: red;
}

While previously unsupported, :has() is now gaining traction, appearing in Safari Technical Preview 137.

Let's explore another scenario: adding spacing after headers, but adjusting the spacing if a subtitle is present:

h2,
.subtitle {
  margin: 0 0 1.5rem 0;
}
.header-group:has(h2):has(.subtitle) h2 {
  margin: 0 0 0.2rem 0; /* Reduced spacing due to subtitle */
}

Note the chaining of :has() selectors: .header-group:has(h2):has(.subtitle). This differs from using a selector list within :has(), like .header-group:has(h2 .subtitle). The chained approach selects the <h2></h2> only if .header-group contains both an <h2></h2> and a .subtitle. The selector list approach, however, has different selection logic.

Consider :has() as a parent selector pseudo-class. It allows styling parent elements conditionally based on their children, a significant departure from traditional CSS's top-down approach. This capability opens up numerous possibilities previously unattainable with CSS alone.

Styling links containing images:

a:has(> img) {
  border: 20px solid white;
}

> img ensures the image is a direct child of the <a></a>. :has() can also be used for conditional margin/padding based on content.

:has() is part of CSS Selectors Level 4, alongside the useful :not pseudo-class. It's significantly more powerful than a simple parent selector; it allows selecting a child element based on the parent's content. For example:

/* Styles elements with a <figcaption> child */
figure:has(figcaption) { … }

/* Styles <img  alt="The CSS :has Selector (and 4  Examples)" > within a <figure> containing a <figcaption> */
figure:has(figcaption) img { … }</figcaption></figure></figcaption>

Chaining and selector lists are supported:

article:has(h2):has(ul) { … } // Chained
article:has(h2, ul) { … }     // Selector list

However, be aware that invalid selectors within a list will invalidate the entire :has() selector. Use :where() or :is() for more robust handling of potentially invalid selectors.

Testing for support:

@supports(selector(:has(p))) {
  /* Supported! */
}

The :not() selector, also from CSS Selectors Level 4, offers excellent browser support and improved readability:

ul li:not(:first-of-type) {
  color: red;
}

This styles all list items except the first. Similar techniques can be used for margins:

ul li:not(:last-of-type) {
  margin-bottom: 20px;
}

CSS Selectors Level 4 also includes :is(), offering concise alternatives to lengthy selectors:

:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
  color: #BADA55;
}

In summary, :has(), along with :is() and :not(), provides powerful and readable ways to style elements based on complex relationships within the DOM.

Further Reading:

• Adrian Bece — Meet :has(), A Native CSS Parent Selector (And More)
• Bramus Van Damme — The CSS :has() selector is way more than a “Parent Selector”
• Michelle Barker — :has() Has Landed in Safari

The above is the detailed content of The CSS :has Selector (and 4 Examples). For more information, please follow other related articles on the PHP Chinese website!