Search code examples
htmlcsscss-selectorsublock-origin

How to hide a div using uBlock by content somewhere in child tags


There is a website that, researching through the browser's dev tools, has the following structure:

<div class='story_<<random_num>>'
  <header class=..
   <div class...
    .... some other nested open and closed tags, divs
    <a class=... href='/spam_url'>sponsor text</a>
...</div>
...

Is it possible to block or hide the entire root div class story... on a specific URL and/or link text like here sponsor_text?

I tried through block item in uBlock but the history number is either random or assigned as something from the database. The number of nested divs can be different as well as their classes, the only thing that is common is that somewhere inside there is definitely a sponsored link.

updated:

Below, I copied and pasted the site structure, deleted all the texts:

<div class="stories-feed__container">

  <!--story_10453596_start-->
  <div class="story_10453596">
    <header class="story__header">
      <div class="story__labels">
        <a href="/companies" target="_blank" rel="nofollow"
           class="story__company-blog-badge company-blog-badge">Company Blog</a>
      </div>
      <h2 class="story__title"><a>...</a>
      </h2>
    </header>
    <div class="story__content-wrapper">
      <div class="story__tags tags">
        <a href="">...</a>
        <a href="" target="_blank"
           rel="noopener" class="tags__tag" data-tag-menu="true" data-tag="..."
           data-analytics-type="post_popup">...</a>
      </div>
      <div class="story__content story__typography" style="display: block">
        <div class="story__content-inner story__content-inner_slice-by-block">
          <div class="story-block story-block_type_text">
            <p>story... some text</p>
          </div>
          <div class="story-block story-block_type_image">
          </div>
          <!--story__cut-->
          <div class="story__hidden-blocks" style="">
            <div class="story-block story-block_type_text">
              <p>other text</p>
            </div>
            <div class="story__read-more">
              <span class="story__read-more-label"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--story_10453596_end-->

  </div>
  << other stories here>>
</div>


other articles have exactly the same structure, but they do not have a <div class="story__labels"> block in the header in which the link to the resource


Solution

  • This should block all div elements with a class that begins with story_ containing a div with a class of story__labels:

    ##div[class^='story_']:has(div.story__labels)
    

    You could even be more explicit and include the header element if you wanted:

    ##div[class^='story_']:has(header > div.story__labels)
    

    See here for more information: Procedural cosmetic filters