title: CSS selector not working with absolute positioned divs
body: <p>I have some CSS that works with CodePen, but does not work on my website. I'm trying to select the .appraisals class for background color manipulation for an opaque screen slider that contains information. When I use a selector to change the background as seen on my CodePen, the background color does not change on my live website, more specifically, the process of selecting the div with nth-of-type does not work. Does anyone have any idea? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#hero {
    height: 92.5vh;
    margin: auto;
    overflow: hidden;
    z-index: 1;
    position: relative;
  }
  
  .appraisals {
    width: 100%;
    margin: auto;
    position: absolute;
    z-index: 1;
    transition: 1s;
  }
  
  .appraisals:nth-of-type(1){
    background-color:red;
    opacity: .5;
  }
  
  .appraisals:nth-of-type(2){
    background-color:blue;
    opacity: .5;
  }
  
  .appraisals:nth-of-type(3){
    background-color:green;
    opacity: .5;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="hero"&gt;
    &lt;div class="appraisals"&gt;
      &lt;div class="appraisals_wrap"&gt;
        &lt;div class="appraisals_text"&gt;
          &lt;blockquote&gt;
            &lt;p&gt;HELLO&lt;/p&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="appraisals"&gt;
      &lt;div class="appraisals_wrap"&gt;
        &lt;div class="appraisals_text"&gt;
          &lt;blockquote&gt;
            &lt;p&gt;HELLO&lt;/p&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="appraisals"&gt;
      &lt;div class="appraisals_wrap"&gt;
        &lt;div class="appraisals_text"&gt;
          &lt;blockquote&gt;
            &lt;p&gt;HELLO&lt;/p&gt;
          &lt;/blockquote&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>