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

Question

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

<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 можно перенести на вторую строку.

Answer 1

Возможно ли при такой структуре обратиться к .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>

БЛОГ НА HUSL

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

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