Understanding :has() selector in CSS.

While working on CSS problems I have come across a situation multiple times where I need to apply styles to parent element only if it has a specific type of child element.
For example –

/* Selects an h1 heading with a
paragraph element that immediately follows
the h1 and applies the style to h1 */

The solution to above problem is using :has() pseudo-class which is also commonly known as parent selector. If we had to do vice versa where styles need to applied to paragraph element(child) we can use > selector.

Let’s understand this more in detail with the help of an example.

Suppose we are working on an application which has a page containing multiple figures with and without captions. Let’s say we have to apply styles to the figures with captions.

Here we can make use of :has() selector which will help us to identify figure with caption and apply to it.

Syntax for :has() selector is…