I am trying to find a way to use CSS to adjust the parent element's opacity if it contains a child element with a specific class. Currently, I have only been able to achieve this on hover by adding a background color to the parent element's ::after pseudo-element. Below is the code I have implemented:
HTML
<ul class="slider-thumbs">
<li class="reason-item"><a>Item 1</a></li>
<li class="reason-item"><a class="selected">Item 2</a></li>
<li class="reason-item"><a>Item 3</a></li>
<li class="reason-item"><a>Item 4</a></li>
<li class="reason-item"><a>Item 5</a></li>
</ul>
CSS
.slider-thumbs .reason-item{position: relative;vertical-align: top;}
.slider-thumbs .reason-item::after {content: '\A';position: absolute;width: 100%; height:100%;top:0; left:0;background:rgba(252,194,38,0.9);opacity: 0;transition: all 1s;-webkit-transition: all 1s;}
.slider-thumbs .reason-item:hover::after, .slider-thumbs .reason-item:after + a.selected{opacity: 1;}
My goal is to change the opacity of the parent element that contains a child element with the "selected" class when an item is selected, so that users can easily see their selection when the page loads. Currently, my code only works for the hover state.
To view my code in action with the hover state, please check out the following Fiddle link.