CODEWITHSUNDEEP
cssless
thomas-peter
thomas-peter

Reputation: 7944

How do I apply a a rule if the div is contained in a a certain container

<div class="wrapper">
  <div class="phoo">
    <div class="thing">
      hello
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="bar">
    <div class="thing">
      hello
    </div>
  </div>
</div>

I want to hide "hello" when the class is bar.

I thought I needed to add a & sign like this but it doesn't work. It's frustrating because I know the documentation is there somewher, but I just don't know what to call this situation.

.wrapper {
  .bar & {
    .thing {
      display:none;
    }
  }
}

Upvotes: 1

Views: 37

Answers (1)

Just code
Just code

Reputation: 13801

.wrapper > .bar > .thing
{
display:none;
}
<div class="wrapper">
  <div class="phoo">
    <div class="thing">
      hello
    </div>
  </div>
</div>

<div class="wrapper">
  <div class="bar">
    <div class="thing">
      hello
    </div>
  </div>
</div>

Worked for me.

Upvotes: 4

Related Questions