How to select elements containing child elements with given attributes in CSS?
P粉170438285
P粉170438285 2023-09-08 18:24:41
0
1
600

I'm trying to write a userscript that selects a element that contains a

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>

The environment supports selection by attribute; this user script is able to select child elements of the target element:

ytd-rich-grid-media[is-dismissed]  {
    
    display: none !important;
    
}

The environment also supports the :has() selector; the script is able to select containing

(regardless of attribute or inheritance depth how).

div:has(ytd-rich-grid-media) {
    
    display: none !important;
    
}

Finally, the environment supports > child selectors; this script is able to select elements that are direct children of

elements:

div > ytd-rich-grid-media {
    
    display: none !important;
    
}

But when I try to combine the :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;
    
}

However, this returns an error in Stylus on Opera. The first error is 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.

While I can't find any information on whether :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?

P粉170438285
P粉170438285

reply all(1)
P粉404539732

Looks more like a stylus extension issue.

This selector is available in Chrome Dev Tools and Other CSS environments.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template