Добавление класса к родителю, используя CSS вместо Javascript

Question

Если флажок установлен, добавьте CSS-класс к родителю без использования Javascript.

Вот пробный код:

Код CSS:

span:focus~.to-be-changed {
  color: red;
}

HTML-код:

<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
<span tabindex="0">Click me!</span>
<p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>

Answer 1

Есть способ, если вы позволите изменить HTML-разметку.Используйте flex в родительском контейнере и его свойство order, чтобы перетасовать дочерние элементы.

span:focus~.to-be-changed {
  color: red;
}

div {
  display: flex;
  flex-direction: column;
}

span {
  order: 2;
}

<div>
  <span tabindex="0">Click me!</span>
  <p class="to-be-changed">I'm going to be red! It's gonna be legen... Wait for it...</p>
  <p class="to-be-changed" style="order:3;">I'm going to be red! It's gonna be legen... Wait for it...</p>
</div>