This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
We already know that we can select an element based on the presence of a certain child element (in Chrome/Edge 105+ and Safari 15.4+)
<p>
<strong>World</strong>!
</p>p:has(strong) {
background-color: aqua;
}World!
This works well with actual elements, but it doesn't work with pseudo-elements.
p::before {
content: "Hello";
}
p:has(::before) {
background-color: salmon;
}World!
According to the spec, that's because Pseudo-elements are generally excluded from :has() because many of them exist conditionally, based on the styling of their ancestors, so allowing these to be queried by :has() would introduce cycles.
.
For the sake of completeness, of course :has() works with pseudo-classes.
p:has(:hover) {
background-color: salmon;
}World!
This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović
Manuel Matuzović | Sciencx (2022-11-14T09:38:54+00:00) Day 36: :has() and pseudo-elements. Retrieved from https://www.scien.cx/2022/11/14/day-36-has-and-pseudo-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.