title: How to prevent outer <div> CSS from affecting inner <div> CSS
body: <p>I have set opacity on the outer wrapper to (0.5). However, this sets all the inner elements' opacity to (0.5) also. How can I make it so that the inner elements have an opacity of 1? Thanks!</p>
  
  <pre><code>//..The HTML..//
  
  &lt;div class="nav-wrapper"&gt;
  
      &lt;div class="circle1"&gt;&lt;/div&gt;
      &lt;div class="circle2"&gt;&lt;/div&gt;
      &lt;div class="circle3"&gt;&lt;/div&gt;
      &lt;div class="circle4"&gt;&lt;/div&gt;
      &lt;div class="circle5"&gt;&lt;/div&gt;
  
   &lt;/div&gt;
  
  //..The CSS..//
  
  .circle1 {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: #BBBBBB;
  }
  
  .nav-wrapper {
      height: 100%;
      width: 100%;
      top: 0;
      opacity: 0.5;
      background: white;
  }
  </code></pre>