set display none to every tag with some class

Question

I have a construct of html like this:

<article>
  <div class="no-feature-image">
   <another divs>...
  </div>
</article>

And now I want to add display:none to whole tag witch has div with "no-feature-image". I tryed to do like this but it doesn't work:

article[no-feature-image] {
display:none
}

Ho can I make to not display every with some specific class? Here I want to remove all articles without images :(

No no this is adding me display:none to div with class .no-feature-image. I want to add display:none to whole tag — wenus, Nov 12 '18 at 10:34

score 0 · Accepted Answer · answered Nov 12 '18 at 10:37

0

Try this one:

article:has(> .no-feature-image) {
  display:none
}

answered Nov 12 '18 at 10:37

Hai Pham

1

is it working on your side? – Temani Afif Nov 12 '18 at 10:40
Yes this is the best solution thank U – wenus Nov 12 '18 at 10:43
@wenus it's not supported https://caniuse.com/#feat=css-has ... only works on Safari so you cannot rely on it – Temani Afif Nov 12 '18 at 10:49
1

@TemaniAfif - It works on Safari? It shouldn't do. `:has()` is only for the Snapshot profile - essentially querySelector() and querySelectorAll() – Alohci Nov 12 '18 at 11:00
@Alohci yes you are right, I was thinking about the `:not()` selector that works only on Safari when we use a complex selector inside it. [like the one of this answer] – Temani Afif Nov 12 '18 at 11:08

1 Answers1