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?
Responsive Images: The Ultimate Guide
Chances are that any Web designers using our Ghostlab browser testing app, which allows seamless testing across all devices simultaneously, will have worked with responsive design in some shape or form. And as today’s websites and devices become ever more varied, a plethora of responsive images…
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…
Source link