Задать вопрос
@gtr7787
css

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

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

<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>
  • Вопрос задан
  • 109 просмотров
6 комментариев
Подписаться 1 Простой 6 комментариев
Пригласить эксперта
Ответы на вопрос 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
.owl-item.active:first-of-type
Ответ написан
4 комментария
4 комментария
@shure348
:first-child будет искать просто первый элемент в блоке а не первый среди .active
если первый элемент будет не .active то селектор .active:first-child не сработает

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
Frontend React
Glob-com
от 100 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Мобильное приложение на Flutter
24 апр. 2024, в 14:37
400000 руб./за проект
Доработка проекта на Laravel + JS
24 апр. 2024, в 14:35
1300 руб./в час
Консультация по улучшению качества рендера
24 апр. 2024, в 14:24
5000 руб./за проект
Ещё заказы