#CSS has really come a long way since I started out :mumble, mumble: years ago.
In continuing my CSS news series, the latest update that has me and other front end devs buzzing is the new :has() pseudo-class.
It looks something like this if you’re looking to target a parent/child combo: .parent:has(.child){}
or if you’re looking to target a sibling using the sibling combinator:
h1:has(+ h2){}
Lots of us, myself included, are calling it a “parent selector”, which we’ve been asking for for years.
But this is selling it a bit short. Based on MDN docs,”this pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.” So it’s more of a relational selector, not just a parent selector. (https://lnkd.in/gP79APH5)
This week, I just so happened to use this new feature to target a child/parent combo and it worked flawlessly in Chrome… but failed in Firefox, a browser MDN currently flags as a browser that doesn’t support this pseudo-class.
I was running an older version of Firefox, updated it, and :has() worked just fine.
Perhaps this might be concerning but my older version of Firefox was v115, 2.21% of global usage.
Caniuse.com indicates it has over 90% support so I think it’s safe to use in modern browsers. (https://lnkd.in/gFt_E4_R)
What do you think? Would you use this new pseudo class in production?
What new css features have you played with recently?
Leave a Reply