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

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>

CodePudding user response：

Q: How can you use

which shows Safari is applying your rule

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

CodePudding user response：

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/

CodePudding user response：

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.