Как менять стили для активной кнопки индикатора слайдера?

Question

[smiros]

Приветствую, друзья!

Есть такая пагинация слайдера

так вот для активной dots, которая является бАтоном, нужно чтобы менялся цвет и размер самой "точки".
слайдер применил SLICK. Пытаюсь задать стили для dots. Пока безуспешно.
При смене слайдеров у активного li присвается класс .slick-active. А у button ничего не меняется.

Если задаю стили LI, то button сверху накладывает свои стили...
знаю что у элемента а есть псевдокласс :active. Как быть с батоном или лишкой - непонятно ((

Answer 1

[Никита Баев]

Как вариант:

.slick-active > button {
  // ваши стили
}

Comments

[smiros]

и все стили (color, background и др) задавать самой кнопке или li?

[Никита Баев]

smiros: самой кнопке.

Answer 2

[Edward]

Текущий каскад стилей, который применяется к нужной кнопке, перебивает стили для просто класса .slick-active, значит надо увеличить каскад и применить нужные стили для него.

1. Выберите кнопку , входящую в класс .slick-active в DOM дереве "Инспектора"
   
2. Cправа, в секции стилей "Правила", найдите цепочку, к которой применяются текущие правила и правьте стили в этой цепочке.
   

Comments

[smiros]

увеличить каскад - это что? Применить к родителю или наоборот к ребенку?

[Edward]

smiros: Начните с основ CSS, например здесь: https://htmlacademy.ru/courses/66