CSS hover change another div (within another seperate wrapper div)

Question

I am trying to alter another div element with css hover. I got it working when they are under the same container. But on my site the element that has to be changed has to be under another separate wrapper div.

HTML

<div class="a">Div A</div>
<div id="box">
    <div class="c">Div C</div>
</div>

CSS

.a:hover ~ .c {
    background: #3F6;
}

#box {
}

Here's what I want to achieve... works in the first set when you hover over Div A. Does not on the second set. https://jsfiddle.net/69017jwc/

Answer 1

In the second example, .c isn't a sibling of the .a element.

You would need to select the sibling #box element and then select the descendant .c element from there, .a:hover ~ #box .c :

Updated Example

.a:hover ~ .c,
.a:hover ~ #box .c {
    background: #3F6;
}

If the element that contains the .c element doesn't have a class or an id, then you could just use the universal selector:

.a:hover ~ * .c {
    background: #3F6;
}

Answer 2

Im not too sure what you are looking to do but from what I understand you want it to highlight each different "question" sepertly. If so try this:

<div>
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>
</div>
<br /><br />
<div class="a">Div A</div>
<div class="b">Div B</div>
<div class="c">Div C</div>