Как при помощи CSS менять при нажатии цвет

#html #css

 


 



div находится во внешнем 
, как при нажатии на 

менять стиль внутреннего div, а при ещё одном нажатии откатывать назад. Желательно
с использованием только css. 
    

Ответы

Ответ 1

В CSS3 клик можно обрабатывать благодаря вот такому "костылю" с чекбоксом:



.first-div {
  width: 180px;
  height: 180px;
  border: 1px solid black;
  position: relative;
}

label {
  position: absolute;
  width: 100%;
  height: 100%;
}

input {
  display: none;
}

.first-div > div {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  margin: 20px;
}

input:checked ~ div {
    border-color: green;
}

 
 
 


 





То есть Вы создаёте чекбокс и скрываете его. Создаёте label для этого чекбокса и
с помощью позиционирования накладываете label на весь внешний блок. Получается, что
вроде как Вы кликаете по блоку, но на самом деле по label. И чекбокс меняет свою активность.

А уже стили внутреннего блока вы ставите в зависимость от того, активен чекбокс или нет.


Ответ 2

Можно задать цвет в .first-div через color (напр. color: red), а в дочернем использовать
переменную current-color (background: currentColor), вот пример - https://codepen.io/anon/pen/zpLRar



.first-div {
  color: yellow;
}

.first-div div {
  background: currentColor;
}

.first-div p {
  color: black;
}

.first-div:active {
  color: red;
}

  

    

      Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel aperiam illo fugiat
inventore nostrum eligendi incidunt, velit doloribus corporis praesentium assumenda,
harum ea quisquam accusamus soluta sit nesciunt sequi. Suscipit.
    
  





Также если нужно именно toggle-поведение, то вместо div использовать label и checkbox
с ним:



#myCheckbox {
  display: none;
}

#myCheckbox:checked + .first-div {
  color: red;
}


 



Ответ 3

На чистом css я не вижу способа, как это можно реализовать (при наведении легко,
а вот при нажатии уже хз)

Но можно простой строчкой на jquery это сделать: 
При нажатии на div - его дочернему div либо дается новый класс red, либо убирается,
если он уже есть


 


 



Ответ 4

Вариант на css с использованием псевдокласса :target



* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#parent {
  border: 2px solid #00f;
  position: relative;
  width: 150px;
  height: 150px;
  margin: 15px auto;
}

#parent a[href="#parent"],
#parent a[href="#parentHidden"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 0;
}

#parent a[href="#parent"] {
  display: block;
  color: #555;
}

#parent a[href="#parentHidden"] {
  display: none;
}

#parent .childDiv {
  line-height: 150px;
  text-align: center;
}

#parent .childDiv:before {
  content: '✔';
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background: green;
  color: #fff;
  opacity: 0;
}

#parent:target a[href="#parent"] {
  display: none;
}

#parent:target a[href="#parentHidden"] {
  display: block;
}

#parent:target .childDiv {
  display: block;
  color: #f00;
}

#parent:target .childDiv:before {
  opacity: 1;
}

  label
  label hidden

  
Child