Как присвоить разные цвета активным иконкам в меню?

Question

[Roddrigo]

Добрый день. Ситуация: Есть менюшка с одностраничной навигацией. Как сделать так что бы когда имеет класс active цвет иконки внутри менялся на нужный? Пробовал через CSS прописать, увы не помогло:

.main-menu .trim-trimb1-01 li.active > a{
color: #000 !important;
}

Классы иконок: trim-trimb1-01, pro2-agroma2, pro2-kaz, pro-agromig, pro2-sturman. Каждая из них в активном состоянии должна иметь свой цвет. Может есть какие то методы как это можно реализовать?

<ul class="nav menu">
<li class="active">
                        <a href="#item-179497138800" data-alias="home"><i class="ba-menu-item-icon trim-trimb1-01" data-value="trim-trimb1-01"></i>1</a>
                    </li>
                    <li class="">
                        <a href="#item-16436916182580" data-alias="about-us"><i class="ba-menu-item-icon pro2-agroma2" data-value="pro2-agroma2"></i>2</a>
                    </li>
                    <li>
                        <a href="#item-16436186536280" data-alias="services"><i class="ba-menu-item-icon pro2-kaz" data-value="pro2-kaz"></i>3</a>
                    </li>
                    <li>
                        <a href="#item-16436126671730" data-alias="contact-us"><i class="ba-menu-item-icon pro-agromig" data-value="pro-agromig"></i>4</a>
                    </li>
                <li><a href="#item-16436126691740" data-alias="5"><i class="ba-menu-item-icon pro2-sturman" data-value="pro2-sturman"></i>5</a></li>
</ul>

Comments

[Вадим]

.main-menu .trim-trimb1-01 li.active > a
А что это за селектор? Ко скольки элементам он применяется?
Я вот ввижу что ни к одному.
Где у вас последовательность элементов такая?

В вашем случае должно быть что то вроде того:
.menu li.active .pro2-sturman { color: red }

[Roddrigo]

Вадим, действительно чет я затупил... Спасибо! Помогло :З

Answer 1

[Вадим]

.main-menu .trim-trimb1-01 li.active > a
А что это за селектор? Ко скольки элементам он применяется?
Я вот ввижу что ни к одному.
Где у вас последовательность элементов такая?

В вашем случае должно быть что то вроде того:
.menu li.active .pro2-sturman { color: red }