<div id="outer" class="container">
  <div id="inner" class="container">
    <ul>
      <li class="nav"><a href="#">One</a></li>
      <li class="nav"><a href="#">Two</a></li>
    </ul>
  </div>
</div>
    
      @layer yellow, purple, green;

      @layer yellow {
        #outer div ul .nav a {
          padding: 5px;
          display: inline-block;
          margin-bottom: 10px;
      

        }
      }
      @layer purple {
        div div li a {
          color: rebeccapurple !important;
        }
      }
      @layer green {
        a {
          color: lightgreen;
        }
      }               
    
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.