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:

Solution 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.

Solution 2:

As I have answered in your other post:

It looks like your code is wrapped by a body-tag and a #parts-tag. This means you need to change your code to this:

Baca Juga

#partThree{
    display: block;
}

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

The & takes EVERYTHING before the current line. So if your final SCSS is:

body {
    #parts {
        #partThree {
            display: block;

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

Then the & will add .two-parts before everything else, and make it:

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

Html5 Guru

SCSS Parent Selector Not Works

Solution 1:

Solution 2:

Post a Comment for "SCSS Parent Selector Not Works"