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.
