Выбрать элемент селектором CSS

Рейтинг: 0Ответов: 1Опубликовано: 16.03.2023

Имеется такая структура:

<label class="agreement__label">
  <span class="wpcf7-form-control-wrap" data-name="acceptance-311">
    <span class="wpcf7-form-control wpcf7-acceptance">
      <span class="wpcf7-list-item">
        <input type="checkbox" name="acceptance-311" value="1" aria-invalid="false">
      </span>
    </span>
  </span>
  <div class="agreement__rect"></div>
</label>

Возможно ли при такой структуре обратиться к .agreement__rect, если чекбокс активен? Также div можно перенести на вторую строку.

css html html5 css3 contact-form7
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Возможно ли при такой структуре обратиться к .agreement__rect, если чекбокс активен?

Как вариант - использовать такой селектор. У меня в Опере 96.0.4693.50 - работает.

.agreement__label:has(:checked) .agreement__rect {
  border: 1px solid;
}
<label class="agreement__label">
  <span class="wpcf7-form-control-wrap" data-name="acceptance-311">
    <span class="wpcf7-form-control wpcf7-acceptance">
      <span class="wpcf7-list-item">
        <input type="checkbox" name="acceptance-311" value="1" aria-invalid="false">
      </span>
    </span>
  </span>
  <div class="agreement__rect"></div>
</label>