не работает псевдокласс :checked у radioi. не выкупаю че не так

Question

.sortIcon i {
    float: right;
    font-size: 15px;
    color: #555555;
}

.custom-radio>input:checked+span.sortIcon i {
    color: red;
}

<label class="custom-radio">
  <input type="radio" name="color" checked value="name-radio-1">
  <span class="radio-btn"></span>
  <span class="radio-text">Лучшее</span>
  <span class="sortIcon"><i class="fa-solid fa-arrow-down-wide-short"></i></span>
</label>

Answer 1

Так нужно? Если да, посмотрите на поиск нужного селектора. В вашем случае

label + span – первый правый сосед: span на том же уровне вложенности, который идёт сразу после label

Пример:

.sortIcon i {
  /*float: right;*/
  font-size: 18px;
  color: #555555;
}

.custom-radio>input:checked~.sortIcon i {
  color: red;
}

<label class="custom-radio">
  <input type="radio" name="color" checked value="name-radio-1">
  <span class="radio-btn"></span>
  <span class="radio-text">Лучшее</span>
  <span class="sortIcon"><i class="fa-solid fa-arrow-down-wide-short">1</i></span>
</label>
<label class="custom-radio">
  <input type="radio" name="color" value="name-radio-2">
  <span class="radio-btn"></span>
  <span class="radio-text">Самое лучшее</span>
  <span class="sortIcon"><i class="fa-solid fa-arrow-down-wide-short">2</i></span>
</label>

БЛОГ НА HUSL

не работает псевдокласс :checked у radioi. не выкупаю че не так

Ответы (1 шт):