After spending hours trying to figure this out, I'm hopeful that someone can provide some insight into my issue.
The task at hand is to define a CSS selector that changes the background-color of a DIV (.first) only when a specific checkbox (#test1) is checked.
Here's an example of what I'm working on: http://jsfiddle.net/Zg6Vf/1/
HTML:
<div class="container">
<div class="first">
<input id="test1" name="accordion" type="checkbox" />
<label for="test1">
<img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg" class="hide1"><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg" class="hide2"></label>
<article class="content">
<p>Spring onion parsley squash lotus root gumbo swiss chard spinach amaranth scallion collard greens coriander brussels sprout caulie leek ricebean. Dandelion lotus root plantain mung bean spring onion radish soko fennel cucumber komatsuna. Shallot bell pepper broccoli welsh onion kohlrabi kale celery corn fava bean epazote.</p>
</article>
</div>
<div class="first">
<input id="test2" name="accordion" type="checkbox" />
<label for="test2">
<img src="http://designmodo.github.io/Flat-UI/images/icons/svg/retina.svg" class="hide1"><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/clocks.svg" class="hide2"></label>
<article class="content">
<p>Spring onion parsley squash lotus root gumbo swiss chard spinach amaranth scallion collard greens coriander brussels sprout caulie leek ricebean. Dandelion lotus root plantain mung bean spring onion radish soko fennel cucumber komatsuna. Shallot bell pepper broccoli welsh onion kohlrabi kale celery corn fava bean epazote.</p>
</article>
</div>
</div>
CSS:
.container{
width: auto;
height: auto;
margin: 0 auto;
font-family:Georgia;
font-size: 1em;
line-height: 1.5em;
display: block;
color: black;
}
.container label{
position: relative;
display: block;
cursor: pointer;
margin: 10px;
float: none;
width: auto;
}
.container input{
display: none;
}
.container article{
overflow: hidden;
height: 0px;
position: relative;
}
.container input:checked ~ article.content{
height: auto;
}
input[type='checkbox']:checked + label > .hide1 {
display: none !important;
}
input[type='checkbox']:checked + label > .hide2 {
display: block !important;
}
.hide2 {
display: none !important;
}
Essentially, clicking on the Yellow Toiletpaper should change the background of the .first div to yellow, but only when the #test1 checkbox is checked. How can this be achieved with CSS?
I'm looking forward to any assistance :)