css - 使用 CSS 而不是 Javascript 将类添加到父级

Question

如果选中复选框，则在不使用 Javascript 的情况下向父级添加 CSS 类。

这里是试过的代码:

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>