Как задать псевдокласс классу?

Question

[Хорь Обыкновенный]

Есть 2 класса - active, inactive. У inactive не должно быть псевдоклассов и с этим все в порядке, но когда я задаю псевдоклассы active'у, они не слушаются. active присваиваю всем элементом с айди but*

#but, #but1, #but11, #but2, #but3 {
    position: absolute;
    width: 7%;
}

#inp {
    width: 15%;
    margin: 21% 41.56%;
    height: 4.7%;
    border: thin solid lightsteelblue;
    outline: none;
}

input[type=text] {
    text-align: center;
    background-color: white;
    color: black;
    font-family: "Trebuchet MS";
    font-size: 3.5vh;
}

button {
    padding: 0;
    border: none;
    font: inherit;
    color: inherit;
    background-color: transparent;
}

#but, #but11, #but1, #but2, #but3, #but4, #but5, #but6 {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    border: thin solid transparent;
    border-radius: 0.7vh 0.7vh 0.7vh 0.7vh;
    padding: 0.1% 1%;
    color: #ffffff;
    background-color: #9555af;
    font-size: 2.5vh;
    font-family: 'Candara Light';
}

#time {
    width: 10%;
    position: absolute;
    height: 8%;
    border: none;
    outline: none;
    z-index: 1;
}

#time1 {
    width: 10%;
    position: absolute;
    height: 8%;
    border: none;
    outline: none;
    z-index: 2;
}

input[disabled] {
    text-align: center;
    color: black;
    font-family: 'Century Gothic';
    font-size: 3vh;
    background: linear-gradient(rgb(230, 100, 101), rgb(145, 152, 229));
}

#but1 {
    outline: none;
}

#but11 {
    outline: none;
}

#but2 {
    outline: none;
}

#but3 {
    outline: none;
}

#but2, #but3 {
    padding: 0.1% 1%;
    width: 10%;
}

#but1, #but2 {
    width: 7%;
}

#but, #but3 {
    width: 10%;
    padding: 0.1% 1%;
}

#buttonsAndTime, #but, #but11, #but1, #but2, #but3, #but4, #but5, #but6, #inp, #time, #time1 {
    position: absolute;
}

#buttonsAndTime {
    width: 98%;
    height: 98%;
}

#but1 {
    margin-top: 25%;
    margin-left: 42.4%;
    visibility: hidden;
    outline: none;
}

#but2 {
    margin-top: 25%;
    margin-left: 50.9%;
    visibility: hidden;
    outline: none;
}

#but5 {
    margin-top: 25%;
    margin-left: 50.9%;
    width: 7%;
    visibility: hidden;
    outline: none;
}

#but11 {
    margin-top: 25%;
    margin-left: 46.8%;
    outline: none;
}


#but3, #but4, #but6, #but {
    width: 11%;
    height: 5.5%;
}

#but6 {
    margin: 13% 79.6%;
    outline: none;
}

#but4 {
    margin: 9% 74.6%;
    outline: none;
}

#but {
    margin: 6% 74.6%;
    outline: none;
}

#but3 {
    margin: 16% 74.6%;
    visibility: hidden;
    outline: none;
}

#time, #time1 {
    margin: 6% 22%;
}

#but6, #but4, #but3, #but {
    margin-left: 72%;
}

#ll {
    background: linear-gradient(rgb(145, 152, 229), rgb(230, 100, 101));
    outline: none;
    border: none;
    position: absolute;
    opacity: 0.6;
    width: 18%;
    height: 6%;
    margin: 21.2% 22%;
}

.inactive {
    opacity: 0.6;
    cursor: default;
}

.active {
    opacity: 1;
    cursor: pointer;
}

.active:hover {
    color: #9050AA;
    border-color: currentColor;
    background-color: white;
    transition-duration: 450ms;
}

Comments

[WapSter]

Смотри что перекрывает стили.

[Игорь]

Полностью код предоставьте пожалуйста.

[Антон Литвиненко]

какой жуткий код

[Eduard07]

псевдокласс ? а есть такое ? = )))

Answer 1

[Данил Ларионов]

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

<div class="1">
  <div class="active"></div>
  <div class="active"></div>
  <div class="active"></div>
</div>

<div class="2">
 <div class="active"></div>
 <div class="active"></div>
</div>

<div class="3">
 <div class="active"></div>
 <div class="active"></div>
</div>

И ты в css указываешь так

.active:nth-child(4) {
  стиль
}

это не правильно
Правильно будет так

.1 .active:nth-child(2) {
  стиль
}