Search

CSS :has() Interactive Guide

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 to the entire page, like “Is the fixed-position footer on the page right now? Yes? Then move that icon in the lower right corner up a bit.” My favorite on this page is: “Are there two buttons? OK center them. Are there three buttons? Split them up with some flush left and some flush right.” Quantity query!

Wanna learn CSS from a course?

Frontend Masters logo

FYI, we have a full CSS learning path with multiple courses depending on how you want to approach it.

One response to “CSS :has() Interactive Guide”

Leave a Reply

Your email address will not be published. Required fields are marked *

Frontend Masters ❤️ Open Source

Did you know? Frontend Masters Donates to open source projects. $313,806 contributed to date.