#css
Вопрос:
У меня проблема с покраской последнего элемента с .active дочерним классом .progress-indicator в другой цвет.
Этот селектор работает неправильно: .progress-step.active:last-of-type .progress-indicator .
Он выбирает последнее .progress-step (число 4), когда приобретает класс .active .
Как я могу это сделать в моем случае?
Это мой пример кода: https://codepen.io/Liohich/pen/QWgqmRz
Комментарии:
1. Пожалуйста, предоставьте достаточно кода, чтобы другие могли лучше понять или воспроизвести проблему.
Ответ №1:
К сожалению, :last-of-type не работает для выбора классов и вместо этого должен применяться к типу элемента. Вы можете добиться желаемого стиля с помощью JavaScript.
В моем решении я добавил класс last к тому .progress-indicator , на который нажат.
.progress-step.active.last .progress-indicator {
background-color: blue;
}
$('.progress-step').click(function() {
$('.progress-step').removeClass('last');
$(this).toggleClass('last');
});