1

I've been trying to solve this for a couple of hours now and it is driving me mad so I hope someone will be able to shed some light on my issue.

I am trying to define a CSS selector; I would like to change the background-color of a DIV (.first) when a specific checkbox (#test1 only) is checked.

My example is here: 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;
}

Basically, when you click on the Yellow Toiletpaper, I would like the .first div to have a background of yellow, but only when the #test1 checkbox is checked. How should I select this with CSS?????

I hope someone can help :)

cheers.

replicant129
  • 103
  • 1
  • 9

1 Answers1

2

There is no parent selector in CSS. What you can do instead is use the sibling selector and have a yellow background for article.content 

.container input#test1:checked ~ article.content{
    background-color: yellow;
}

See modified JSFiddle

If you don't mind the white gap between the image and the text, you can also add 

.container input#test1:checked + label {
    background-color: yellow;
}

JSFiddle

Update:

If you can employ jQuery, you could use 

$('#test1').change(function() {
    $('#test1:checked').parent().css('background-color', 'yellow');
});

See JSFiddle

Olaf Dietsche
  • 66,104
  • 6
  • 91
  • 177
  • thank you for your input! but this isn't what I'm trying to achieve...i'm trying to have a yellow background colour on the parent div, but only when #test1 is checked, not #test2... but thank you – replicant129 Nov 28 '13 at 21:06
  • 1
    I understand that, but you can't select the parent div with CSS. Restricting to test1 is possible though, see modified answer. – Olaf Dietsche Nov 28 '13 at 21:13
  • what if i don't necessarily want the parent div's background to be yellow, but any other div??? – replicant129 Nov 28 '13 at 21:20
  • With CSS, you can select siblings or children, but not ancestors. Maybe the jQuery solution works for you. – Olaf Dietsche Nov 28 '13 at 21:24