css active state for many elements - html

Question

I have a div and inside this div there is an icon with background and text.
when clicking on this div I want to change 3 things:
the div background, the icon background and the text color.
how can I do it with CSS only?
http://jsfiddle.net/g1nrye8e/
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}

Answer 1

Preserve clicked state using pure CSS
The best way to preserve the clicked state, without JavaScript is to
wrap your elements inside a <label>
immediately before the element you want to target place an invisible input checkbox
when the input becomes :checked target any first next sibling element using +* and change styles accordingly
Repeat the same rule for +*'s inner elements:
/* DEFAULT STYLES */
.div{
width: 200px;
height: 100px;
background: blue;
margin:10px;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
/* HIDE CHECKBOX HELPER */
label.click > input{ /* hide the input checkbox */
position:absolute;
visibility:hidden;
}
/* ACTIVE STYLES */
label.click > input:checked +* { /* (the next .div) */
background: #000;
}
label.click > input:checked +* .icon{
background: #c0ffee;
}
label.click > input:checked +* .text{
color: #f00ba4;
}
<label class="click">
<input type="checkbox"> <!-- :checked state changes +div styles -->
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>
<label class="click">
<input type="checkbox">
<div class="div">
<div class="icon"></div>
<div class="text">text</div>
</div>
</label>

Answer 2

Just add a class to the parent when it is clicked, then write more specific CS for that class.
Here's a running example.
document.querySelector(".click").addEventListener("click", function() {
this.classList.toggle("clicked");
});
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.clicked.click{
background: green;
}
.clicked .icon{
background: red;
}
.clicked .text{
color: blue;
}
<div class="click">
<div class="icon"></div>
<div class="text">text</div>
</div>

Answer 3

This is a different solution with only css, but you have to click to every element:
.click{
width: 200px;
height: 100px;
background: blue;
}
.icon{
width: 50px;
height:50px;
background: yellow;
display: inline-block;
}
.text{
color: #fff;
display: inline-block;
}
.click:focus{
background: red;
}
.icon:focus{
background: grey;
}
.text:focus{
background: black;
}
<div class="click" tabindex="1">
<div class="icon" tabindex="2"></div>
<div class="text" tabindex="3">text</div>
</div>
There is a great explanations about the tabindex and :focus without using JS. Check it out impressivewebs