0

Why are the first two examples not working?

div:has(button:not([style*="display: none"]))::after {
  content: 'not working';
}


div:has(button)::after {
  content: 'this does not work either';
}

/*
div::after {
  content: 'only this works, why?';
}
*/
<div><button></button></div>
Simon Ferndriger
  • 4,455
  • 6
  • 28
  • 53
  • Your code works fine, it's only a "browser support" issue so closing the question as "cannot reproduce" – Temani Afif Aug 25 '22 at 19:08
  • `:has()` is an experimental feature only available in a draft of CSSWG specs that only one browser supports. You should not expect it to work yet in production code. – TylerH Aug 26 '22 at 20:22
  • As well, "not working" is not a useful problem statement. How should it work? – miken32 Aug 26 '22 at 20:23
  • Honestly, probably best served as a duplicate of this canonical for now: https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector And in the future when it is not, the question will be no-repro since once the answer is no longer "no" to the canonical, the problem of _this_ question will go away, too. – TylerH Aug 26 '22 at 20:24

3 Answers3

3

Q: How can you use :has() together with ::after?

A: By using a browser that has support for :has().

Safari so far is the only browser where the current stable version supports :has() (since version 15.4, we're at 15.6.1 as of now).

Chrome is going to support it in the next stable version 105 which is going to be released in 5 days from now, August 30, 2022.

Firefox has been supporting it behind a flag since version 103. It can be enabled by entering about:config in the address bar and then enabling layout.css.has-selector.enabled (set it to true).

This is how your snippet renders in current Safari (MacOS):

enter image description here

which shows Safari is applying your rule

div:has(button:not([style*="display: none"]))::after {
  content: 'not working';
}
connexo
  • 53,704
  • 14
  • 91
  • 128
1

You're likely using a browser that doesn't support the has pseudo class. I tried running this on a beta version of Chrome (105) and it worked fine.

Here's a quick reference regarding browser compatibility:
https://developer.mozilla.org/en-US/docs/Web/CSS/:has#browser_compatibility

Extra info

If you are using Chrome, type in chrome://version/ in your address bar to find the current version you have.

Quickz
  • 1,626
  • 2
  • 11
  • 21
1

You should check its support option here css-has and check your browser above to know which Chromium version you're using.

This feature is not enabled by default you'll have to enable it from settings, you can get a guide here on it. https://blog.logrocket.com/how-when-use-css-has-selector/

Vijay Hardaha
  • 2,411
  • 1
  • 7
  • 16