The :has()<\/code> pseudo-class<\/a> is, hands-down, my favorite new CSS feature. I know it is for many of you as well, at least those of you who took the State of CSS survey<\/a>. The ability to write selectors upside down gives us more superpowers I\u2019d never thought possible.<\/p>\n\n\n\n

I say \u201cmore superpowers\u201d because there have already been a ton of really amazing clever ideas published by a bunch of super smart people, like:<\/p>\n\n\n\n

\n
• Using :has()<\/code> as a CSS Parent Selector and much more<\/a> by Jen Simmons<\/li>\n\n\n\n
• Quantity Queries for \u201cislands of elements\u201d with the same class, thanks to CSS :has()<\/code><\/a> by Bramus<\/li>\n\n\n\n
• Style a parent element based on its number of children<\/a> by Bramus<\/li>\n\n\n\n
• Using combinators in :has()<\/code><\/a> by Manuel Matuzovi\u0107<\/li>\n\n\n\n
• 4 ways CSS :has()<\/code> can make your HTML forms even better<\/a> by Austin Gil<\/li>\n\n\n\n
• Video: Practical Use Cases for :has()<\/code> Pseudo-Class<\/a> by Zoran Jambor<\/li>\n\n\n\n
• :has()<\/code>: the family selector<\/a> by Jhey Tompkins<\/li>\n<\/ul>\n\n\n\n

  This article is not a definitive guide to :has()<\/code>. It\u2019s also not here to regurgitate what\u2019s already been said. It\u2019s just me (hi 👋) jumping on the bandwagon for a moment to share some of the ways I\u2019m most likely to use :has()<\/code> in my day-to-day work… that is, once browser support is good enough. (Firefox is the last holdout, but will support it, which is imminent<\/a>.)<\/p>\n\n\n\n

  When that does happen, you can bet I\u2019ll start using :has()<\/code> all over the place. Here are some real-world examples of things I\u2019ve built recently and thought to myself, \u201cGee, this\u2019ll be so much nicer once :has()<\/code> is fully supported.\u201d<\/p>\n\n\n\n\n\n\n

  Avoid having to reach outside your JavaScript component<\/h3>\n\n\n

  Have you ever built an interactive component that sometimes needs to affect styles somewhere else on the page? Take the following example, where <nav><\/code> is a mega menu<\/a>, and opening it changes the colors of the <header><\/code> content above it.<\/p>\n\n\n\n

  \n