简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
How to select elements containing child elements with given attributes in CSS?
P粉170438285
P粉170438285 2023-09-08 18:24:41
0
1
583

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
P粉4045397322023-09-09 11:10:04 1 floor

Looks more like a stylus extension issue.

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

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！