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?
Introducing MooTools Templated
One major problem with creating UI components with the MooTools JavaScript framework is that there isn’t a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven…
Being a Dev Dad
I get asked loads of questions every day but I’m always surprised that they’re rarely questions about code or even tech — many of the questions I get are more about non-dev stuff like what my office is like, what software I use, and oftentimes…
Source link
