I'm trying to write a userscript that selects <div> elements containing a <ytd-rich-grid-media> element with a [is-dismissed] attribute as an immediate child.
<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>
The environment supports selection by attribute; this user script is able to select the child of the target element:
ytd-rich-grid-media[is-dismissed] {
display: none !important;
}
The environment also supports the :has() selector; this script is able to select <div>s that contain <ytd-rich-grid-media>s (regardless of attribute or depth of inheritance).
div:has(ytd-rich-grid-media) {
display: none !important;
}
Lastly, the environment supports the > child selector; this script is able to select the <ytd-rich-grid-media> elements that are the direct child of a <div>:
div > ytd-rich-grid-media {
display: none !important;
}
However, the moment I try to combine the :has() selector with either of the other tools, everything falls apart. I would expect the CSS I'm looking for to look something like this:
div:has(> ytd-rich-grid-media[is-dismissed] ) {
display: none !important;
}
However, this returns errors in Stylus on Opera. The first error is Expected RPAREN but found '>'.; if the > is removed as a diagnostic step, the first error is instead Expected RPAREN but found '['.. If I instead remove the [is-dismissed], the first error remains present.
While I haven't been able to find any information about whether :has() can support children with attribute selectors, I've found a few sources (including this one) that suggest that the > selector should work just fine with :has(). Is this an implementation bug (within Opera and/or Stylus), an unsupported combination of CSS selectors (either for within Opera specifically or within CSS as a whole), a mistake on my part in assembling those selectors, or something else?
