DEV Community

Discussion on: My CSS Wishlist

Collapse
 
ssalka profile image
Steven Salka

I'm still waiting on the :has selector - if it ever reaches maturity, I'd be using it all over the place

Collapse
 
tomhodgins profile image
Tommy Hodgins

It's been in the spec for 4 years, but no browsers have found a way to implement it in an efficient enough way, so until then we have to use JavaScript. I see this:has(that) as something like Array.from(document.querySelectorAll(this)).filter(tag => tag.querySelector(that)), so to make that a little more useful I would write a helper function like this: codepen.io/tomhodgins/pen/KZydyL

I'm using a little plugin to read JS-in-CSS so I can write it from my stylesheet, here's a little more about how that's working, but as long as you could run this helper function on the right events it would mark up elements in the DOM that match our :has() rule and give them unique attributes. Then the function returns a string which is text of a CSS stylesheet, with the rules written targeting the elements with our new unique attributes. As long as you can populate a stylesheet in DOM or CSSOM with the CSS that the function returns it will work: codepen.io/tomhodgins/post/what-is...