:has()

Selecting the *next* element in CSS can be done easily with the + combinator. Selecting the *previous* element used to be impossible, but now can be like :has(+ .el), and can be extended in either direction.

I’m such a :has() selector fanboy in CSS. We’ve covered it many times. But Bruce Lawson goes as far as to call it “The God Selector” because: [It] is omnipotent because it doesn’t require any structural relationship between the thing being checked and the thing being styled. In other words, you can select any element […]

Checkboxes and labels used to have to be right next to each other to be a potent UI duo. You could do trickery like this: But now, thanks to :has() in CSS, we’re not beholden to that structure anymore. We can :has() it all, as it is said. Now that these HTML elements have some autonomy, without losing their connection […]

You know I’m a little obsessed with :has() in CSS and how useful it is. So I’m chuffed that Ahmad Shadeed made a killer interactive guide with loads of great examples. The basics are so satisfying like “Does this <figure> have a <figcaption>? Yes? OK then style it differently.” And that can be leveled up […]

I just wrote about the <dialog> element, with some basic usage and things to watch for. It’s a great addition to the web platform. Here’s another interesting thing we can do, connecting it to another one of my favorite new things on the web platform: :has(). (You can see I’ve been pretty into it lately.) […]

I’m still obsessed with how awesome and powerful :has() is in CSS. Ryan Mulligan really drives it home in We can :has it all with a single Pen that offers simple, realistic UI controls for: These are things you can easily imagine on any website, and now handled here entirely without JavaScript at all.

We just looked at how :has() in CSS makes quantity queries so easy, so this post by Terence Eden caught my eye, showing some trickery where you can style an entire page based on when it was published. That is, if there is something like a <time> or <meta> tag that has this information on […]

What is a quantity query? It’s a bit of CSS that allows you to style an element (and its descendants) based on how many children the element has. Example of a Quantity Query Situation Imagine a homepage currently showing 20 articles, more than you normally show. Maybe it’s a slow news day, and the lead […]