https://jsfiddle.net/jg69c3yf/1/
I don't have a lot of experience with CSS.
My goal is to target the div with the class arrow-right
, but only if it's inside the first child of a div with the class active
.
In this sample code, Only item 3 should be styled with green color.
HTML :
<div class="owl-stage">
<div class="owl-item">
1
</div>
<div class="owl-item">
2
</div>
<div class="owl-item active">
<div class="item">
<div class="arrow-right">
3
</div>
</div>
</div>
<div class="owl-item active">
<div class="item">
<div class="arrow-right">
4
</div>
</div>
<div class="owl-item active">
<div class="item">
<div class="arrow-right">
5
</div>
</div>
</div>
CSS:
.owl-stage .owl-item.active:first-child {
background-color:red;
color:blue;
}
.owl-stage .owl-item.active:first-child .arrow-right {
background-color:red;
color:green;
}