Note: the :has() pseudo-class itself doesn’t 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 afforded 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’re selecting an

element only if it’s directly followed by an

:

<code class="css language-css"><span class="token selector">h1<span class="token pseudo-class">:has</span><span class="token punctuation">(</span><span class="token combinator">+</span> h2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code>

In the image below, two

elements are shown. 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

:

<code class="css language-css"><span class="token selector">ul<span class="token pseudo-class">:has</span><span class="token punctuation">(</span><span class="token combinator">~</span> p<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code>

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). Just as with regular selectors, our :has() selectors can be extended to be far more complex, such as setting 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:

<code class="css language-css"><span class="token property">h2</span><span class="token punctuation">:</span><span class="token function">has</span><span class="token punctuation">(</span>+ h3<span class="token punctuation">)</span> ~ p
</code>

In the image below, two

elements are shown. In the second, 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 be more successful using :has() if we have a good understanding of the available CSS selectors. MDN offers a concise overview of selectors, and I’ve written 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_ :

<code class="css language-css"><span class="token selector">p<span class="token pseudo-class">:has</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> strong<span class="token punctuation">,</span> em<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code>

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’re testing both that an is the first child of the

, and that the

contains an

followed by an

:

<code class="css language-css"><span class="token selector">article<span class="token pseudo-class">:has</span><span class="token punctuation">(</span><span class="token combinator">></span> img<span class="token pseudo-class">:first-child</span><span class="token punctuation">)</span><span class="token pseudo-class">:has</span><span class="token punctuation">(</span>h1 <span class="token combinator">+</span> h2<span class="token punctuation">)</span></span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
</code>

The image below shows three

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

followed by an

.



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

See the Pen
:has() selector syntax examples by SitePoint (@SitePoint)
on CodePen.

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