has pseudo classes
Why does this exist?
These new pseudo class :has() are said to be able to change the way we write CSS. I had to take the time to investigate them.
I am a component inside another one.
inner paragraph
Conclusion
The has pseudo selector is a pretty impressive gain for CSS, finally allowing a parent selector which would have normally required JS. This can allow for strategies that look at the nearby DOM (or distant) and add-on CSS if needed
Almost immediately after this experiment, I thought of a use-case for it. I never enjoyed reaching out of a component in component based frameworks such as changing the body tag to lock the scroll of the document. Now I can just body:has(.overlay) my way through it without reaching out of the component and the CSS will remain located with the component.