How to hide element if it contain specific div with a class

Question

I have this html structure:

<div>
<div class="parent">
<div>
  <div class="label">
    <div class="xyz"></div>
  </div>
</div>
</div>
<div class="parent">
<div>
  <div class="label">
  </div>
</div>
</div>
</div>

I want to hide the parent if it is contains div with class="xyz" I tried that:

.parent div.xyz {
  display: none;
}

but seems like my selector does not work.

Nithya Rajan · Answer 1 · 2019-03-05T04:41:46.773

0

In css, there's no parent element selector. In your case, you can use jquery to achieve the solution.

$('.parent:has(.xyz)').addClass('hide');

.hide {
  visibility: hidden;
}

edited Mar 05 '19 at 04:41

answered Mar 05 '19 at 04:25

Nithya Rajan

4,722
19
30

TheDev · Answer 2 · 2019-03-05T05:02:24.913

0

div.xyz .parent {
  display: none;
}

<div>
  <div class="xyz">
    <div class="parent">
      <div>
        <div class="label">
          <div class="xyz"></div>
        </div>
      </div>
    </div>
  </div>

  <div class="parent">
  <div>
    <div class="label">
    </div>
  </div>
  </div>
</div>

You can not select an ancestor, just descendants, an example of how you could do is like this:

<div class="xyz">
<div class="parent">
  <div class="label">
    <div class="xyz"></div>
  </div>
</div>
<div class="parent">
  <div class="label">
  </div>
</div>
</div>

div.xyz .parent {
  display: none;
}

in this case you will hide both .parent class

See more about descending selector

to select a parent or element inside another wapper you will need to use javascript

edited Mar 05 '19 at 05:02

answered Mar 05 '19 at 04:27

TheDev

407
2
12

seems like does not work – Sergino Mar 05 '19 at 04:39
I correct, was wrog `display: hidden;` the correct is `display: none;` – TheDev Mar 05 '19 at 04:46
seems like the selector does not work – Sergino Mar 05 '19 at 04:49
seems like I got one more div level. just edited the question – Sergino Mar 05 '19 at 04:52
do you want hide only the first `.parent`? – TheDev Mar 05 '19 at 04:57
nope, any parent that has the `xyz` in its child `div div.xyz` – Sergino Mar 05 '19 at 04:59
I can not alter the html to add more classes that is the problem – Sergino Mar 05 '19 at 05:03
as stated, without javascript you can only do the inverse path, I put the target class encapsulated by the xyz class, if this is not useful you will have to use javascript tried to follow a line without javascript is already described this intention in the post I updated my answer – TheDev Mar 05 '19 at 05:05
can you add a js code? – TheDev Mar 05 '19 at 05:05
nope I can not add js code – Sergino Mar 05 '19 at 05:05
do you think this one https://developer.mozilla.org/en-US/docs/Web/CSS/:has can help? – Sergino Mar 05 '19 at 05:07
exists the `:has` selector to do this that you want, but none browse suports yet :c you this is the only way, we can't help you, sorry – TheDev Mar 05 '19 at 05:19
https://caniuse.com/#search=%3Ahas here the suports of `:has` – TheDev Mar 05 '19 at 05:20

score 0 · Answer 3 · answered Mar 05 '19 at 04:35

0

You can Hide the parent element with the following jquery

jQuery('.parent').each(function(){
    if (jQuery(this).find('div.xyz').length != 0) {
        jQuery(this).closest('.parent').hide();
    }
});

Hope it will helpful.

answered Mar 05 '19 at 04:35

krishna

76
7

How to hide element if it contain specific div with a class

3 Answers3