title: Child and parent not working
body: <p>I have three circles with the same features except color and position inside a table class, but in the css isn't getting the features the child.</p>
  
  <pre><code>  &lt;div class="table circles"&gt;
        &lt;div class="circle-1"&gt;&lt;span&gt;text1&lt;/span&gt;&lt;/div&gt;
        &lt;div class="circle-2"&gt;&lt;span&gt;text2&lt;/span&gt;&lt;/div&gt;
        &lt;div class="circle-3"&gt;&lt;span&gt;text3&lt;/span&gt;&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>And in the scss:</p>
  
  <pre><code>    .circle{
         width: 84px;
         height: 84px;
         display: inline-block;
         border-radius: 48px;
  
         .circle-1{
            box-shadow: 0 0 0 5px $b1;
            background-color:$b1;
         }
         .circle-2{
            box-shadow: 0 0 0 5px $b2;
            background-color:$b2;
            margin-left:150px;
         }
         .circle-3{
            box-shadow: 0 0 0 5px $b3;
            background-color:$b3;
            margin-left:300px;
         }
      }
  </code></pre>
  
  <p>Any help? Thanks!</p>