On hover of any element how can I select all sibling elements using CSS3 selector?

Question

Consider below given HTML.

<ul class="chars_container">
   <li>A</li>
   <li>B</li>
   <li>C</li>
   <li>D</li>
   <li>E</li>
</ul>

CSS:

.chars_container{
    list-style-type: none
}

.chars_container li{
    float : left ;
    margin: 20px ;
    font-size : 50px;
    color : #f00;
}

.chars_container li:hover ~ li{
       color : #0f0; 
}

On hover of any 'li' I want to change color property of all sibling 'li'. I am using ~ selector which is selecting only next all siblings.

Please visit this fiddle for the same code.

Answer 1

If you wish to have something like Demo

css

.chars_container:hover > li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}

or

.chars_container:hover li{
       color : #0f0; 
}
.chars_container li:hover {
       color : #f00; 
}