:has() alternatives

Hey, are there any polyfills or alternate methods for :has() for browsers that don’t support it? Thanks in advance

11 Replies

depends on what you want to do, it is possible to do some nasty workarounds one that is pretty trivial is *:has(.example) .example .other that can be easily changed to just removing the :has() pseudo-class if you have a concrete example, it will be impossible to answer thinking about this, as long as the element is in the same level or deeper than the element in :has(), it should be trivial for example: :has(.cookie) i can be implemented as .cookie + i, .cookie i but if the .cookie is on a lower level, it seems to be impossible

snxxwyyOP•2w ago

Hm those are interesting, so there’s not really a ‘good’ workaround? It’s just a feature you’ll have to lose some support using?

ἔρως•2w ago

i cant answer without concrete examples as ive explained, some are easily worked around, while others are impossible

Simon•2w ago

What epic said, and ... imo – a clean alternative involves JavaScript because vice versa :has() is our replacement for JavaScript. If the missing rules wouldn't render the content unreadable then personally I would use "critical" selectors. Further reading https://caniuse.com/?search=has, https://gs.statcounter.com/browser-market-share

snxxwyyOP•2w ago

For example, giving a div a red background if it has a paragraph in-

div:has(p) {
  background-color: red;
}

div:has(p) {
  background-color: red;
}

ἔρως•2w ago

thats impossible to work around without javascript

MarkBoots•2w ago

well... with a little trickery... and only in certain occasions... (not recommended)

div{
  position: relative;
  p::after{
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    z-index: -1;
  }
}

div{
  position: relative;
  p::after{
    content: "";
    position: absolute;
    inset: 0;
    background: red;
    z-index: -1;
  }
}

but indeed, you'l need javascript

snxxwyyOP•2w ago

yeah it does seem like more hassle than it may be worth i mean all major browsers support it, it's just those extra ones like opera mini and whatnot

Chris Bolson•2w ago

Opera mini doesn’t even support grid 😄

snxxwyyOP•2w ago

Christ 😅

ἔρως•2w ago

opera mini ... that's a name i havent heard in a decade

Gaming

Programming

:has() alternatives