CSS chaining adjacent sibling with :checked not working

Question

Why isn't this working for me in Chrome when I click the 2nd radio button? Paragraph 2 stays highlighted and paragraph 4 doesn't get highlighted. Is this a Chrome bug?
HTML:

<input type="radio" name="toggler" checked />
<p>Paragraph one</p>
<p>Paragraph two</p>
<input type="radio" name="toggler" />
<p>Paragraph three</p>
<p>Paragraph four</p>

CSS:

:checked + p + p {
  color: red;
}

Answer 1

I think you have the same issue as described here:

Webkit bug with `:hover` and multiple adjacent-sibling selectors

As a workaround just add :checked ~ p {} (intentionally empty) and it works:

http://jsbin.com/abeniy/7/edit

Answer 2

That is strange behaviour. I think it has something to do with the <p> being siblings of the input element, and not children. I found a bit of a hack as a work around. You simply surround each input and p block in a div. Then use the ~ selector...

the css:

input:checked ~ p + p {
        color: red;
      }

the html:

<div>
<input type="radio" name="accordion" checked />
<p>Paragraph one</p>
    <p>Paragraph two</p>
</div>
<div>
    <input type="radio" name="accordion" />
    <p>Paragraph three</p>
<p>Paragraph four</p>
</div>

the demo:

http://codepen.io/lukeocom/pen/CABes

UPDATE:

I just noticed if you add this css to your original html, then it works too. Im not sure why though as the second selector style is empty...

input:checked + p + p {
        color: red;
      }

p:nth-child(2){}