Hilighting multiple div elements placed into each other - html

Question

I have css
div{margin-left:15px;}
div:hover{color:red;}
and I have multiple divs
<div>
<div>123</div>
<div>456</div>
<div>
<div>789</div>
<div>
<div>10 11 12</div>
</div>
</div>
</div>
I need that only one div became hilighted when it's under mouse pointer.
Now, when mouse is over any of these, they all become red.
Is it possible with pure CSS code?

Answer 1

I'm not sure why you have so many divs, if you want them indented like a list you should use ul and li but to solve your issue you could wrap all of them in a container and target the div hover within that container:
.all div:hover{color:red;}
JSFIDDLE
EDIT
Just add class names to them and target the class then
JS

Answer 2

Given the details the OP provided in the comments of the question I would suggest following solution:
I would add a span wrapper around every text. So the abstract function that generates the HTML would become this:
function(){
$a.="<div><span>$inc</span>"; // span tag added
if(1){
$a.=function();
}
$a.='</div>';
return $a;
}
Now the HTML output should look somewhat like this:
<div>
<div><span>123</span></div>
<div><span>456</span></div>
<div>
<div><span>789</span></div>
<div>
<div><span>10 11 12</span></div>
</div>
</div>
</div>
Which gives the possibility to style it with this CSS:
div span:hover {
color:red;
}