самозагрузка активного класса п-го ребенок()

Question

У меня есть бутстраповские вкладки, я хочу, чтобы изменить состояние активной вкладки, я могу сделать это легко, как так

.side-nav-cat .active { 
    border: 25px solid #888888; 
} 

однако я хочу иметь различные стили в зависимости от nth-child, я попытался

.side-nav-cat .active li:nth-child(1) { 
    border-left: 25px solid #888888; 
} 
.side-nav-cat .active li:nth-child(2) { 
    border-left: 25px solid #628179; 
} 

Но эта доза не работает, я только с помощью CSS есть способ сделать это?

Answer 1

вы просто должны изменить селектор: .side-nav-cat li:nth-child(1).active

Здесь он выбрать первый li с классом active с вашим селектором это поиск ребенка .active класса.

.side-nav-cat li:nth-child(1).active { 
 
    border-left: 25px solid #888888; 
 
} 
 
.side-nav-cat li:nth-child(2).active { 
 
    border-left: 25px solid #628179; 
 
}

<ul class="side-nav-cat"> 
 
    <li class="active">1</li> 
 
    <li class="active">2</li> 
 
    <li class="active">3</li> 
 
</ul>