What is the reason that the text "Won" is not turning red in the code snippet below? The CSS selector #sisters>*~#too should target all elements that come before the element with ID #too, including the element with ID #won. However, only the element with ID #too is being styled by this selector.
To summarize, Why is the preceding sibling #won not being selected by the CSS rule #sisters>*~#too?
<style>
#sisters>#too~*,
#sisters>*~#too {
color: red;
}
</style>
<div id="sisters">
<div id="won">Won</div>
<div id="too">Too</div>
<div id="tree">Tree</div>
<div id="fore">Fore</div>
<div id="jive">Jive</div>
</div>
See Working Example: http://jsfiddle.net/Supuhstar/XY4Dg/