Hide a div but ONLY if it is within another specific div class

Question

I have a div and I don't want another div to show IF it held within.

My question is, how do I make

<div class="xp-row xp-first-row">

  <div class="social-buttons">
      Some Content Here
  </div>

</div>

But if the div called "social-buttons" is standalone then it will not be hidden...

I was thinking something like this would work:

.xp-row xp-first-row .social-buttons{
  visibility:none
}

But I couldn't get that to work - any ideas?

Thanks for all help

Your outer element has two classes, you need to join those with a dot in your selector - and not have a _space_ between them, because that would be the general descendant combinator. `.xp-row.xp-first-row .social-buttons` — CBroe, Apr 23 '21 at 07:38
With `.xp-row xp-first-row`, you’d be looking for an element with the _tag name_ `xp-first-row`, that is a _descendant_ of an element with the class `xp-row`. — CBroe, Apr 23 '21 at 07:40

score 1 · Answer 1 · answered Apr 23 '21 at 07:48

Rule .xp-row.xp-first-row should be declared without spaces as it is placed within one div:

.xp-row.xp-first-row .social-buttons {
    visibility: hidden;  
}

An example:

.xp-row.xp-first-row .social-buttons{
  visibility: hidden;  
}

<div class="xp-row xp-first-row">
    <div class="social-buttons">
        Some Content Here
    </div>
  </div>

1 Answers1