title: Can't nest a class and change css for it?
body: <p>I can't seem to get this class to function with css, I have tried it with id and class when I type hello into the html <code>offset-top-left</code> it shows but the css doesn't show its attributes?</p>
  <p>html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;target&quot;&gt;
    &lt;div id=&quot;interface-reg&quot;&gt;
      &lt;div class=&quot;top left&quot;&gt;&lt;div class=&quot;offset-top-left&quot;&gt;&lt;/div&gt;&lt;/div&gt;
      &lt;div class=&quot;top right&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;bottom left&quot;&gt;&lt;/div&gt;
      &lt;div class=&quot;bottom right&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>css</p>
  <pre class="lang-css prettyprint-override"><code>.target {
    position: absolute;
    height: 100%;
    width: 100%;
  }
  
  #interface-reg {
    position: relative;
    height: 100%;
    width: 100%;
  }
  
  #interface-reg div {
    position: absolute;
    width: 122px;
    height: 122px;
    background: red;
  }
  
  .offset-top-left {
    height: 50px;
    width: 50px;
    background-color: #green;
  }
  
  .top {
    top: 0;
  }
  .right {
    right: 0;
  }
  .bottom {
    bottom: 0;
  }
  .left {
    left: 0;
  }
  </code></pre>