самозагрузки CSS активная вкладка наследует стили

Question

Я строй вкладки системы и с для каждой вкладки, что некоторый стиль применяется один раз активного использования .acive класса, я могу это сделать, как так

.side-nav-cat li:nth-child(2).active:after { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

как никогда я не с повторить все тот же код на каждом nth-child

поэтому я попытался следующий код, так что я только должен включать border-left: 25px solid color; для каждого отдельного nth-child, я не могу показаться, чтобы получить nth-child наследовать все стили от .side-nav-cat li:after .active

любая идея, почему и как ее исправить? спасибо.

.side-nav-cat li:after .active { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid red; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid blue; 
} 

Answer 1

Ваш первый селектор ищет элемент внутри вашего <li> с классом .active; вместо поиска <li> с классом .active.

Нижеследующее должно работать;

.side-nav-cat li.active:after { 
    content: ""; 
    position: absolute; 
    height: 0; 
    width: 0; 
    left: 100%; 
    top: 0; 
    border: 25px solid transparent; 
    -webkit-transition: all 0.1s ease-in-out; 
    -moz-transition: all 0.1s ease-in-out; 
    -ms-transition: all 0.1s ease-in-out; 
    transition: all 0.1s ease-in-out; 
    border-left: 25px solid #628179; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid red; 
} 

.side-nav-cat li:nth-child(2).active:after { 
    border-left: 25px solid blue; 
}