Comments on: The Power of :has() in CSS

By: Luke

Luke — Thu, 02 May 2024 14:15:41 +0000

Safarie seems to have some repaint issues with complex :has selectors.

body:has(.this) .that {
  display: none;
}

doesn't seem to work properly. If .this is removed and/or added to the DOM, .that isn't repainted automatically. :-(

By: swim

swim — Tue, 16 Apr 2024 09:52:35 +0000

about time. thought this website was dead. looking forward to next article in a year or two

By: Sten

Sten — Tue, 09 Apr 2024 19:03:22 +0000

Yes, it is so powerful! I made a great example to create "table column hover effect" using no javascript but :has. It is here on codepen Modern CSS only column hover

By: Chris L

Chris L — Wed, 03 Apr 2024 17:18:23 +0000

:has lets us have :focus-visible-within also, even though its not a thing. :has(*:focus-visible)

By: Chris Zuber

Chris Zuber — Sun, 31 Mar 2024 19:07:17 +0000

Glad to see content on here again! Looks to be fairly active too.

Yep, :has() is pretty useful. And I see quite a few clever uses of it too… It’s not just a parent selector as many call it.

Also, I’ve found :is() to be useful in writing styles for a polyfill for the Popover API. Using it reduces the specificity, making any other CSS rules override what I’m giving that’s basically fulfilling the role of browser styles.

By: Oyebode Daniel

Oyebode Daniel — Sat, 30 Mar 2024 14:40:54 +0000

Awesome