In this excerpt from Unleashing the Power of CSS, we delve into the CSS :has() selector. Regarded as “the parent selector,” the :has() pseudo-class offers more than just styling an element’s ancestor. With support in Safari 15.4+ and Chromium 105+ (and behind a flag in Firefox), it’s an opportune moment to become acquainted with :has() and its use cases.

As a pseudo-class, the core functionality of :has() is to style the element it’s attached to, also known as the “target” element. This is similar to other pseudo-classes like :hover or :active, where a:hover is intended for styling an element in an active state. However, :has() also shares similarities with :is(), :where(), and :not(), as it accepts a list of relative selectors within its parentheses. This allows :has() to create intricate criteria for testing, making it a highly potent selector.

To comprehend how :has() operates, let’s consider an example of its application. In the following selector, we are testing if an

element has an element as a child:

“`html
article:has(img) {}
“`

A possible outcome of this selector is depicted in the image below. Three article elements are displayed, two with images and both having a palegreen background and distinct padding compared to the one without an image. This selector will apply as long as an element exists anywhere within the

element, whether as a direct child or as a descendant of other nested elements.

If we want the rule to only apply when the element is a direct (un-nested) child of the

element, we can include the child combinator:

“`html
article:has(> img) {}
“`

The result of this modification is shown in the image below. The same three cards are displayed, but this time, only the one where the image is a direct child of the

element has the palegreen background and padding.

In both selectors, the styles we define are applied to the target element, which is the

. Hence, :has() is often referred to as the “parent” selector since if certain elements exist in a certain way, their “parent” receives the assigned styles.

Note: The :has() pseudo-class itself does not add any specificity weight to the selector. Like :is() and :not(), the specificity of :has() is equal to the highest specificity selector in the selector list. For example, :has(#id, p, .class) will have the specificity granted to an id. For a refresher on specificity, review the section on specificity in CSS Master, 3rd Edition.

We can also select a target element if it’s followed by a specific sibling element using the adjacent sibling combinator (+). In the following example, we select an

element only if it’s directly followed by an

:

“`html
h1:has(+ h2) {}
“`

In the image below, two

elements are displayed. In the first one, because the

is followed by an

, the

has a palegreen background applied to it.

Using the general sibling combinator (~), we can check if a specific element is a sibling anywhere following the target. Here, we’re checking if there’s a

element somewhere as a sibling of the

:

“`html
ul:has(~ p) {}
“`

The image below shows two

elements, each containing an unordered list. The second article’s list is followed by a paragraph, so it has a palegreen background applied.

The selectors we’ve used so far have styled the target element attached to :has(), such as the

in ul:has(~ p). Similar to regular selectors, our :has() selectors can be extended to be far more complex, allowing us to set styling conditions for elements not directly attached to the :has() selector.

In the following selector, the styles apply to any

elements that are siblings of an

that itself has an

as an adjacent sibling:

“`html
h2:has(+ h3) ~ p
“`

In the image below, two

elements are displayed. In the second one, the paragraphs are styled with a palegreen background and an increased left margin because the paragraphs are siblings of an

followed by an

.

Note: We’ll achieve greater success using :has() if we have a good understanding of the available CSS selectors. MDN provides a concise overview of selectors, and there is a two-part series on selectors with additional practical examples. Remember, :has() can accept a list of selectors, which we can think of as OR conditions. Let’s select a paragraph if it includes _or_ _or_ :

“`html
p:has(a, strong, em) {}
“`

In the image below, there are two paragraphs. Because the second paragraph contains a element, it has a palegreen background.

We can also chain :has() selectors to create AND conditions. In the following compound selector, we test both that an is the first child of the

and that the

contains an

followed by an

:

“`html
article:has(> img:first-child):has(h1 + h2) {}
“`

The image below shows three

elements. The second article has a palegreen background (along with other styling) because it contains both an image as the first child and an

followed by an

.

You can review all of these basic selector examples in the following CodePen demo.

This article is excerpted from Unleashing the Power of CSS: Advanced Techniques for Responsive User Interfaces, available on SitePoint Premium.

Source link

Share this:

• Twitter
• Facebook

Related