I am experiencing an issue with my CSS code that is functional on CodePen but not on my actual website. I am attempting to target the .appraisals class for manipulating the background color of an opaque screen slider containing information. Despite using a selector to change the background color as successfully demonstrated on CodePen, the background color does not update on my live website. Specifically, the process of selecting the div with nth-of-type is not working as expected. Any suggestions or insights on how to resolve this dilemma would be greatly appreciated.
#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;
}<div id="hero">
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
<div class="appraisals">
<div class="appraisals_wrap">
<div class="appraisals_text">
<blockquote>
<p>HELLO</p>
</blockquote>
</div>
</div>
</div>
</div>