Write a ublock filter rule for a parent element based on content of a child element
Asked Answered
S

2

10

I want to write a ublock filter to hide a list element that has a certain class and content, while I don't want to hide other list items that don't have this content:

class = "mp-Listing-priority"
content is "Topad"

This is the html code of the item that I want to hide.

<li class="mp-Listing mp-Listing--list-item ">
    <a href="" class="mp-Listing-cover-link experimentStateC"></a>
    <figure class="mp-Listing-image-container"></figure>
    <div class="mp-Listing-content">
        <div class="mp-Listing-group mp-Listing-group--main"></div>
        <div class="mp-Listing-group mp-Listing-group--aside">
            <div class="mp-Listing-group mp-Listing-group--top-block"></div>
            <div class="mp-Listing-group mp-Listing-group--bottom-block">
                <span class="mp-Listing-priority">Topad</span>
                <span class="mp-Listing-seller-link">
                    <a href="https://.../" target="_blank" rel="noopener noreferrer nofollow" class="mp-TextLink ">Visit website</a>
                </span>
            </div>
        </div>
    </div>
</li>

None of the examples below hide the list elements that I want to hide:

##li.mp-Listing--list-item[class="mp-Listing-priority"]
##li.mp-Listing--list-item["Topad"]
Shinshina answered 30/7, 2019 at 12:9 Comment(4)
@Temani Afif, this is not about CSS directly, it's about uBlock! there you can select stuff based on content... please reconsider...Death
I think you could hide that with www.domain.com##li.mp-Listing--list-item .mp-Listing-priority:has-text(Topad) not the domain/target in front of the cosmetic filter though, I think uBlock ignores rules without a domain!Death
using www.domain.com##li.mp-Listing--list-item .mp-Listing-priority:has-text(Topad) hides the Topad text from each element in the list, instead of hiding the list element as requested.Shinshina
what if you try www.domain.com##li.mp-Listing--list-item:has-text(Topad)Death
S
5

The answer is

##li.mp-Listing--list-item:has-text(Topad)

Thank you exside

Shinshina answered 30/7, 2019 at 12:42 Comment(0)
S
1

Perhaps it will be useful to someone (i myself, for example, often forget this syntax and always come across this page in searches).

There is an extremely useful way to hide an element whose class contains certain characters.

##[class^="newsTicker_container"]

This tap is useful because many web applications today use CSS-modules that change class postfixes.

Simultaneous answered 22/3 at 15:1 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.