For as long as developers have written CSS code, we’ve been desperate to have a method to allow styling a parent element based child characteristics. That’s not been possible until now. CSS has introduced the :has pseudo-class which allows styling a parent based on a relative CSS selector!

Let’s have a look at a few use cases for :has in CSS:

 /*   If an `a` element contains an image, set the `a`'s display */ a:has(img) {   display: block; }  /*   If a `figure` has a `caption` with a `multiline` class   allow the `figure` to have any height */ figure {   height: 200px; } figure:has(caption.multiline) {   height: auto; }  /*   Hide an advert containing `div` until ads load   and have been injected */ .ad-container {   display: none; } .ad-container:has(.ad) {   display: block; }  /*   If we have an `article` element without a heading,   add top padding because `H1`s have top padding */ article:not(:has(h1)) {   padding-top: 20px; } 

Apple’s Safari is the first browser to support :has , though we should see others quickly follow suit as it’s part of the official CSS spec. Now that we have this new pseudo-class, do you think you’ll use it much? Or will you stick to your current workarounds?

The post CSS :has appeared first on David Walsh Blog.

David Walsh Blog