CSS selector not working with absolute positioned divs
Clash Royale CLAN TAG#URR8PPP
CSS selector not working with absolute positioned divs
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?
#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>
position:absolute
hello
The problem is I cannot use a CSS selector to select the elements when I use :nth-of-type selector.
– hd326
Aug 6 at 3:20
as I explained above, these 3 are absolute positioned div, so they are coming on top of others, and using your
css-selectors you have assigned them color red/blue/green and because css-selectors are working they are setting different color to all these 3, and because opacity:0.5 its showing you the combination of all these 3 color, for time being just remove the position:absolute and see you will get all 3 in sequence and notice all 3 have their own different color you defined in you css-selector so your selector is working fine.– Deepak Sharma
Aug 6 at 3:29
css-selectors
red/blue/green
css-selectors
opacity:0.5
position:absolute
css-selector
I've answered my own question, it didn't really solve my question but I appreciate you trying.
– hd326
Aug 6 at 4:11
1 Answer
1
I found the answer. Anyone having trouble with using selectors for elements, remember to exhaust all selectors such as :nth-last-of-type when selecting elements!!! For some reason, :nth-of-type did not work, but :nth-last-of-type did.
:nth-last-of-type
:nth-of-type
:nth-last-of-type
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
pls explain what you need, as they all
position:absoluteso all will overlap to each other, so on browser it will look like you have singlehelloappraisal element. now what you want to do with it?– Deepak Sharma
Aug 6 at 2:59