How do I match an element containing two matching child elements with CSS?

1 day ago 4
ARTICLE AD BOX

I want to make a CSS selector that matches an element which contains both of two specified matching child elements. For example, let's say I want to match a <section> element that contains both an <h2> element and an element with the .subtitle class.

<section> <!-- Match --> <h2>Header text</h2> <div class="subtitle"></div> </section> <section> <!-- Don't match --> <h2>Header text</h2> </section>

I know that :has() can select containing elements, but specifying two selectors will make it select elements that contain either of the two matching elements rather than both.

section:has(h2, .subtitle)

How can I select an element only if it contains both of two matching elements?

Read Entire Article