The CSS :has() pseudo class

Finally, it's here! The long awaited CSS :has() pseudo class.

A long awaited feature for most front-end developers is a way to style DOM elements based on their children elements. The only way of doing this untill now was by using JavaScript. Due to the release of the new pseudo class :has() we can finally accomplish this without JavaScript!

Basic example

Let's imagine we have two types of <article> elements and we want to add a red border on all articles that have an <img> tag inside of it. By using the :has() pseudo class, this is realy easy to achieve.

See the Pen :has() Pseudo class basic example by Rogier (@ikmaakt) on CodePen.

More details

A great detailed article about this new feature along with some great examples can be found at webkit.org. Be sure to check it out.

Status

This new feature is, at the time of writing, available in the latest versions of Chrome and Safari. For the most active status, check out caniuse.com.