Почему не срабатывает first-child?

Question

[gtr7787]

есть карусель товаров, где для активного класса нужны свои стили

<div class="owl-item active" style="width: 393px;"></div>
<div class="owl-item active" style="width: 393px;"></div>
<div class="owl-item active" style="width: 393px;"></div>
<div class="owl-item" style="width: 393px;"></div>

в стилях задаю
.owl-item.active:first-child {
border: 2px solid red;
}

все работает, но когда активные класс меняется перестает работать

к примеру

<div class="owl-item" style="width: 393px;"></div>
<div class="owl-item active" style="width: 393px;"></div>    <этот актив в css уже не задает стили
<div class="owl-item active" style="width: 393px;"></div>

Comments

[Rustam Bainazarov]

:first-child и :first-of-type по-другому работают.

Когда я столкнулся с данной проблемой, решил это только JS-путем. В моем случае, так нужно было.

Либо же можно хитрить с помощью всяких + и ~.

[Rustam Bainazarov]

gtr7787, типа такого можно:

[gtr7787]

SmthTo, Спасибо большое.все получилось

[Rustam Bainazarov]

gtr7787, имейте в виду, что это все это достаточно жестко привязано к структуре.

[Александр]

Можно код не js?)
А то это бред что пишут. Интуитивно не работает, зачем так сделали. Или только в OWL такая шляпа?

[Александр]

ой бредятнина.

Надо было выделить первый активный из 2ух.

.owl-item {
      opacity: 0.3;
      transition: all 0.3s linear;
    }
    
    .owl-item.active {
      opacity: 1;
    }
    .owl-item.active + .owl-item.active {
      opacity: 0.3;
    }

Answer 1

[Алексей Уколов]

.owl-item.active:first-of-type

Comments

[gtr7787]

побывал,так же

[Rustam Bainazarov]

Не будет работать.

[gtr7787]

как можно решить?

[Алексей Уколов]

.owl-item.active — нужные стили
.owl-item.active ~ .owl-item.active — сброс для остальных

Answer 2

[Александр Алексеев]

:first-child будет искать просто первый элемент в блоке а не первый среди .active
если первый элемент будет не .active то селектор .active:first-child не сработает

сброс можно сделать через :not(.active) например