Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
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?
One of the web components I’ve always loved has been Facebook’s modal dialog. This “lightbox” isn’t like others: no dark overlay, no obnoxious animating to size, and it doesn’t try to do “too much.” With Facebook’s dialog in mind, I’ve created LightFace: a Facebook lightbox…
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event…
Keeping equal heights between elements within the same container can be hugely important for the sake of a pretty page. Unfortunately sometimes keeping columns the same height can’t be done with CSS — you need a little help from your JavaScript friends. Well…now you’re…
One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, “masthead” images is a classy enhancement. Unfortunately creating image reflections within your…