htmlcssfiltercss-selectors

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


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"]

Solution

  • The answer is

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

    Thank you exside