CODEWITHSUNDEEP
cssparsing
Thomas Rbt
Thomas Rbt

Reputation: 1536

Hide element if contains a child by classname

I'm working on a plugin for a website and I would like to hide some parts of the site: There is many articles and some of them are ads, and to know this, there is an element on the article, so I would like to hide the parent article if it contains this class. Note that I can't do this in JS, I need pure css as the content is refreshed every 5 seconds,

Example:

<article>
    <div class="content">
        ...
    </div>
</article>

<article>
    <div class="content">
        ...
        <span class="ad_label">Sponsored</span> <!-- I need to detect this class in css and apply a display none on the parent <article> -->
    </div>
</article>

<article>
    <div class="content">
        ...
    </div>
</article>

<article>
    <div class="content">
        ...
    </div>
</article>

Thanks for help

Upvotes: -1

Views: 26

Answers (2)

Mootez Zemmel
Mootez Zemmel

Reputation: 21

you can use the :has pseudo-class

article:has(.ad_label) {
    display: none;
}

Upvotes: 1

Ori Drori
Ori Drori

Reputation: 192607

Use the :has pseudo-class to hide the article (I've marked it with red background) if any of each it's children has the class:

article:has(.ad_label) {
  background: red; /* display: none; */
}
<article>
  <div class="content">
    ...
  </div>
</article>

<article>
  <div class="content">
    ...
    <span class="ad_label">Sponsored</span> <!-- I need to detect this class in css and apply a display none on the parent <article> -->
  </div>
</article>

<article>
  <div class="content">
    ...
  </div>
</article>

<article>
  <div class="content">
    ...
  </div>
</article>

Upvotes: 2

Related Questions