GgWvLK

GgWvLK.markdown

GgWvLK

A Pen by Thomas Francis Wrenn on CodePen.

License.

index.html

<div class="example" id="one">
<div class="parent" id="one">
  Parent
  <div class="child" id="one">
    Child
    <div class="grandchild" id="one">
      Grandchild
    </div>
    <div class="grandchild" id="two">
      Grandchild
    </div>
  </div>
</div>
</div>
<div class="example" id="two">
<div class="parent" id="one">
  Parent
  <div class="child" id="one">
    Child
    <div class="grandchild" id="one">
      Grandchild
    </div>
    <div class="grandchild" id="two">
      Grandchild
    </div>
  </div>
</div>
</div>


<div class="example" id="one">
<div class="parent" id="one">
  Parent<br/>Test
  <div class="child" id="one">
    Child
    <div class="grandchild" id="one">
      Grandchild
    </div>
    <div class="grandchild" id="two">
      Grandchild
    </div>
  </div>
</div>
</div>
<div class="example" id="two">
<div class="parent" id="one">
  Parent<br/>Test
  <div class="child" id="one">
    Child
    <div class="grandchild" id="one">
      Grandchild
    </div>
    <div class="grandchild" id="two">
      Grandchild
    </div>
  </div>
</div>
</div>

style.css

#parent {
  background: red;
}
#child {
  background: blue;
}

style.scss

html {
  position: relative;
}
.example {
  padding: 10px;
.parent,
.child,
.grandchild {
  padding: 5px;
  color: white;
}
.parent {
  background: red;
  position: relative;
}
.child {
  background: blue;
}
.grandchild {
  &#one {
    background: #440;
  }
  &#two {
    background: orange;
  }
}
   &#one {
    .child {
/*      position: relative;*/
     .grandchild {
       &#one {}
       &#two {
         position: absolute;
         top: 70px;
       }
     }
   }
  }
  &#two {
    .child {
      position: relative;
     .grandchild {
       &#one {}
       &#two {
         position: absolute;
         top: 50px;
       }
     }
   }
  }
}