I have a carousel, generated by OWL. All the visible containers have the class "active", the invisible 'off-stage' containers don't. So I basically want to address the first visible container using something like this:

.owl-item.active:first-of-type .item { border:4px #369 solid; }

So after moving the first image off-stage the related part of carousel code looks ikes this:

<div class="owl-stage">
<div class="owl-item"><div class="item"><img src="/content/uploads/wdc-3.jpg"></div></div>
<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-2.jpg"></div></div>
<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-1.jpg"></div></div>
</div>

The problem is: the CSS marker "first-of-type" will not recognize the "new" first element. In this case: after the first carousel-change NO element will have the designated border ('4px #369 solid'). What am i missing?

Thank you! Any pointers would be appreciated!

2 Answers

2
Carsten Løvbo Andersen On Best Solutions

Try this:

.owl-item.active .item { border:4px #369 solid; }
.owl-item.active ~ .owl-item.active .item { border:none; }

Problem is that css doesn't provide a :first-of-class selector that only chooses the first occurrence of a class.

Demo

.owl-item.active .item { border:4px #369 solid; }
.owl-item.active ~ .owl-item.active .item { border:none; }
<div class="owl-stage">
<div class="owl-item"><div class="item"><img src="/content/uploads/wdc-3.jpg"></div></div>
<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-2.jpg"></div></div>
<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-1.jpg"></div></div>
</div>

1
Community On

If you are using jquery then eq will help you,Just add this line in js section

$('.active').eq(0).css('border','1px solid')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="owl-stage">
<div class="owl-item"><div class="item"><img src="/content/uploads/wdc-3.jpg"></div></div>

<div class="owl-item"><div class="item"><img src="/content/uploads/wdc-3.jpg"></div></div>

<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-2.jpg"></div></div>

<div class="owl-item"><div class="item"><img src="/content/uploads/wdc-3.jpg"></div></div>

<div class="owl-item active"><div class="item"><img src="/content/uploads/wdc-1.jpg"></div></div>
</div>