html - SCSS parent selector not works

Question

I have a container and three parts in it. I want to make unvisible thirth part while addind class to the parent container. But my codes not works...

Here is the HTML code:

<section id="parts" class="two-parts">
    <div id="partOne">...</div>
    <div id="partTwo">...</div>
    <div id="partThree">...</div>
</section>

Here is the SCSS code:

#partThree{
    display: block;

    .two-parts &{
        display: none;
    }
}

I want to hide #partThree div, when #parts div has .two-parts class.

Guys! I found the problem. I checked the output of Scss to Css, and here is the Css output:

.two-parts body #parts #partThree {
  display: none;
}

It should be #parts.two-parts #partThree. But why is that goes to the top of all elements?

Answer 1

The easiest way to achieve what you need is by setting .two-parts and #partThree as siblings, and apply ~ css operator.

<style>
  #partThree {
    display: block;

  .two-parts ~ {
    display: none;
  }
}
<style>

<section id="parts">
    <div id="partOne">...</div>
    <div id="partTwo" class="two-parts">...</div>
    <div id="partThree">...</div>
</section>

this will only work if #partThree and .two-parts siblings and .two-parts comes before.