Класс целевого диапазона внутри метки элемента: проверено

Question

Я пытаюсь нацелить класс span, расположенный внутри метки. Это возможно с css? Я могу повлиять на метку, но мне бы очень хотелось изменить цвет фона item_title:

<style>
.item input[type=checkbox]:not(old):checked + label + item_title,
.item input[type=radio]:not(old):checked + label + item_title,
.item input[type=checkbox]:not(old):checked + span + label + item_title,
.item input[type=radio]:not(old):checked + span + label + item_title {
  background: #007cd1;
}
</st

<div class="item">
    <input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
    <label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>

Answer 1

Это вполне возможно. Но вы должны исправить некоторые ошибки в вашем коде.

Во-первых, я не уверен, что означает not(old). Является ли old именем класса?

Вторым относительно имен классов. Обязательно обращайтесь к ним в своем css с идентификатором class ., поэтому .item_title является правильным способом ссылки на этот класс.

В-третьих, существуют различные типы combinators в пределах css. + - соседний братский комбинатор. > является дочерним комбинатором.

В вашем html, label является соседним братом вашего ввода, а .item_title является дочерним для label.

Наконец , вы пытаетесь использовать селектор типа [type=checkbox], когда вы должны использовать [type=radio], чтобы соответствовать вашему html.

См. ниже и хорошо читать: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

.item input[type=radio]:checked + label > .item_title {
  background: #007cd1;
}

<div class="item">
    <input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
    <label style="height:250px;" for="tv_starter"><span class="item_title">Starter TV</span><br />Our Starter TV Package, $45.00</label>
</div>

Answer 2

Так как диапазон является дочерним из label, а не родным , вам нужно

.item input[type=checkbox]:not(old):checked + label > item_title /* etc*/
{
  background: #007cd1;
}

Answer 3

Ваш css недействителен. Используйте этот, чтобы сделать input[type='radio'] синим, если он выбран:

.item > input[type='radio']:checked ~ label > .item_title {
  background: #007cd1;
}

<div class="item">
  <input data-price="45.00" data-label="Starter TV" id="tv_starter" type="radio" name="tv_choice" value="Starter TV" class="required">
  <label style="height:250px;" for="tv_starter">
    <span class="item_title">Starter TV</span>
    <br />Our Starter TV Package, $45.00
  </label>
</div>