Как изменить стиль третьего элемента при помощи :checked?

Question

Как, при помощи :checked (#second_button:checked), изменить фон div-a, в котором находится данный checkbox (#buttons), используя только HTML и CSS?

Пробовала сделать так, как ниже - не работает. Спасибо всем за помощь)

#buttons {
  background-color: yellow;
  width: 100%;
  height: 500px;
}

#buttons label {
  background-color: green;
  width: 200px;
  height: 50px;
  display: block;
  margin: 10px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}

label[for="second_button"] {
  background-color: yellow;
}

#second_button:checked~#buttons {
  background-color: black;
}

<div id="buttons">
  <div>
    <input type="checkbox" id="first_button">
    <label for="first_button">I can change the background-color</label>
  </div>
  <div>
    <input type="checkbox" id="second_button">
    <label for="second_button">I can make headline disappear</label>
  </div>
</div>

Answer 1

При той разметке, которая представлена в вопросе, организовать требуемое поведение невозможно (пока не ввели в CSS псевдокласс :has()).

Можно приблизительно имитировать логику, если разместить input-ы перед div-ом, но это жутко неправильно, и делать так я не советую:

#buttons {
  background-color: yellow;
  width: 100%;
  height: 500px;
}

#buttons label {
  background-color: green;
  width: 200px;
  height: 50px;
  display: block;
  margin: 10px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}

label[for="second_button"] {
  background-color: yellow;
}

#first_button:checked~#buttons {
  background-color: red;
}
#second_button:checked~#buttons {
  background-color: black;
}

<input type="checkbox" id="first_button">
<input type="checkbox" id="second_button">
<div id="buttons">
  <div>
    <label for="first_button">I can change the background-color</label>
  </div>
  <div>
    <label for="second_button">I can make headline disappear</label>
  </div>
</div>

Answer 2

Вот ещё один способ сделать это, но тоже извращённый.

#buttons {
  width: 100%;
  height: 500px;
  position: relative;
}

#buttons label {
  background-color: green;
  width: 200px;
  height: 50px;
  display: block;
  margin: 10px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}

label[for="second_button"] {
  background-color: yellow;
}

.bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -2;
  background-color: yellow;
}

#first_button:checked + .bg {
  z-index: -1;
  background-color: red;
}

#second_button:checked + .bg {
  z-index: -1;
  background-color: black;
}

<div id="buttons">
  <div>
    <input type="checkbox" id="first_button">
    <div class="bg"></div>
    <label for="first_button">I can change the background-color</label>
  </div>
  <div>
    <input type="checkbox" id="second_button">
    <div class="bg"></div>
    <label for="second_button">I can make headline disappear</label>
  </div>
</div>

БЛОГ НА HUSL

Как изменить стиль третьего элемента при помощи :checked?

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