General "previous" adjacent (+) sibling not working

Question

<span class='radio'>Place holder for Radio1</span>
<input checked type=radio name='radio' class='radio'>
<span class='radio'>Place holder for Radio2</span>
<input type=radio name='radio' class='radio'>

In this, I only want the <span> associated with the respective radio button to be visible but...

* {
    visibility:hidden
}
.radio + .radio:checked {
    visibility:visible;
}

doesn't work, while this does:

* {
    visibility:hidden
}
.radio:checked + .radio {
    visibility:visible;
}

So why can't I select and manipulate the css related to the previous adjacent sibling?

[jsfiddle]

Answer 1

Because + can only select the next sibling, not the previous one.

You have also set up a pretty interesting example of what can go wrong when you have two completely different elements with the same class name and you're trying to select one or the other by class. If the + selector worked both ways, both of your first two elements would have visibility: visible regardless of how you wrote your selector.

There is no previous sibling selector, so you need to find another way around this. Additionally, the "general" sibling selector is ~, not +, although neither one is able to reach previous siblings...