How to hide all elements except a grandchild with a specific class with CSS?

Question

I'm not sure if this can be done entirely with CSS (imperative), but it's halfway working at the moment. I have this current HTML setup:

<div class="content">
    <div>
        <div class="image"></div>
    </div>
    <div class="text"></div>
    <div class="text"></div>
    <div>
        <div class="button"></div>
    </div>
    <div>
        <div class="image"></div>
    </div>
</div>

My current CSS hides all of the child elements of ".content" that don't have a class.

.content > *:not([class]):first-child {
  display:block;
}

Of the remaining 3 visible class child elements of ".content", I need to hide them all except the first child element that has the grandchild element with the ".image" class. This is the CSS I have, but it's not working:

.content > *:not([class]):not(.image):first-child {
    display:block;
}

There is no parent selector in CSS, only sibling selectors. In this particular case you could use `:last-child`, but you are probably looking for a solution that also works when that element is not the last child. This will only be possible using javascript. — Johannes, Jan 06 '18 at 15:33
It's imposible on CSS. You tryed not show parrent element by attribute of child. CSS so does not work — Andrey Fedorov, Jan 06 '18 at 15:37

Andrey Fedorov · Answer 1 · 2018-01-06T15:56:39.560

It's imposible on CSS. You tryed not show parent element by attribute of child. CSS so does not work. But you can small js for this:

document.querySelector(".image").parentNode.style.display = "block";

.content>div {
  display: none;
}

<div class="content">
  <div>
    <div class="image">1</div>
  </div>
  <div class="text">2</div>
  <div class="text">3</div>
  <div>
    <div class="button">4</div>
  </div>
  <div>
    <div class="image">5</div>
  </div>
</div>

score 0 · Answer 2 · answered Jan 06 '18 at 16:09

Andrey’s answer is good, however if you don’t want to use JS I think you will need to have a class on the intermediary children as well since the entire tree to the element you want must be visible. That is, if any parent of the element you want to show is hidden then the children will be too. Something like this might do:

<div class="content">
    <div>
        <div class="image"></div>
    </div>
    <div class="text"></div>
    <div class="text"></div>
    <div>
        <div class="button"></div>
    </div>
    <div class="visible">
        <div class="image"></div>
    </div>
</div>

.content > * {
    display: none;
}
.content > .visible {
    display: block;
}

How to hide all elements except a grandchild with a specific class with CSS?

2 Answers2