Question

I have a structure of divs inside divs, something like:

<div>
    <div>
        <div class='a'>Hello</div>
        <div class='a'>Stack</div>
        <div>Overflow</div>
    </div>
    <div>
        <div>You</div>
        <div class='b'>Are</div>
        <div class='b'>The Best</div>
    </div>
    <div>
        <div>Have</div>
        <div class='b'>a nice</div>
        <div>Day !!</div>
    </div>
</div>

I would like all divs with class a to change the background color when one of them is hovered by mouse. The same for all divs with class b: when one of divs with class b is hovered, all divs with class b should change the background color.

Is that possible to implement this behavior without Javascript ?

If the answer is no:
Is that possible if known that all divs with class a are consecutive divs in the same level (i.e. siblings) ?

I can add also other classes to divs, if needed.

Answer 1

You can get it “half working” in the simpler case where there are no container <div>s:

<div>
  <div class='a'>Hello</div>
  <div class='a'>Stack</div>
  <div>Overflow</div>
  <div class='b'>Are</div>
  <div class='b'>The Best</div>
  <div>Have</div>
  <div class='b'>a nice</div>
  <div>Day !!</div>
</div>

Then you could use the general sibling combinator, with the unfortunate caveat that it only works for elements that come after the element described on the left-hand side. So, for example, if you hovered over the <div> containing “The Best”, only that and the “a nice” <div> would have a changed background:

div.b:hover, div.b:hover ~ div.b {
    background-color:#CCCCCC;
}

I wasn’t able to come up with a way that would fully take care of your scenario through CSS alone, though. I’m leaning towards what the others have said about it not being possible (even in the simplified case) right now.