I'm trying to write a userscript that selects a The environment supports selection by attribute; this user script is able to select child elements of the target element: The environment also supports the Finally, the environment supports But when I try to combine the However, this returns an error in Stylus on Opera. The first error is While I can't find any information on whether element with [is-dismissed] Properties as direct children.
<div> <!-- do not select this -->
<div> <!-- do not select this -->
<ytd-rich-grid-media>
</ytd-rich-grid-media>
</div>
<div> <!-- DO select this -->
<ytd-rich-grid-media is-dismissed>
</ytd-rich-grid-media>
</div>
</div>
ytd-rich-grid-media[is-dismissed] {
display: none !important;
}
:has() selector; the script is able to select div:has(ytd-rich-grid-media) {
display: none !important;
}
> child selectors; this script is able to select elements that are direct children of
div > ytd-rich-grid-media {
display: none !important;
}
:has() selector with any other tool, everything falls apart. I want the CSS I'm looking for to look like this: div:has(> ytd-rich-grid-media[is-dismissed] ) {
display: none !important;
}
Expected RPAREN but found '>'. ;If > is removed as a diagnostic step, the first error will be changed to Expected RPAREN but found '['.. If I remove [is-dismissed], the first error remains. :has() can support children with attribute selectors, I have found some sources (including this one) that suggest > Selectors should work properly with :has(). Is this an implementation bug (in Opera and/or Stylus), an unsupported combination of CSS selectors (either in Opera or in CSS as a whole), a bug on my part when assembling these selectors, or something else?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Looks more like a stylus extension issue.
This selector is available in Chrome Dev Tools and Other CSS environments.