Могу ли я изменить свойтсов css без js по клику на элемент?

Question

[Алексей]

Допустим, у меня есть wrap, в нем 3 div с классом item и один button, могу ли я по клику на button изменить свойство css wrap БЕЗ js и тп , на чистом CSS?

Comments

[Rustam Bainazarov]

Лучше не нужно. Только хаком на жёсткой иерархии элементов и чекбоксом. Делайте на JS — не будете привязаны к непонятным решениям.

Answer 1

[Finesse]

На чистом CSS нет, но можно с применением HTML. Смысл трюка: изменение состояния <input type="checkbox" /> и привязка CSS-свойств к этому состоянию. Пример:

<input type="checkbox" id="wrapTrigger" />
<div class="wrap">
  <p>Любой контент</p>
  <label for="wrapTrigger" class="button">Нажми меня</label>
  <p>Любой контент</p>
</div>

<style>
  #wrapTrigger {
    display: none;
  }
  .wrap {
    color: red;
  }
  input:checked + .wrap {
    color: blue;
  }
</style>

В этом примере важно, чтобы блок .wrap располагался сразу после input, иначе не сработает CSS-селектор +. HTML-элемент label переносит эффект клика на указанный чекбокс (связь происходит через значения полей for и id).