CSS sibling chain with: verified not working

Question

Why does this work for me in Chrome when I click the 2nd switch button? Paragraph 2 remains highlighted and paragraph 4 is not 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 problem as described here:

Webkit error with `: hover` parameters and several adjacent selectors

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

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

Answer 2

This is a weird behavior. I think this is because <p> are siblings of the input element, not children. I found a bit of hacking as a job. You just surround each input and p block in the div . Then use the selector ~ ...

css:

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

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> 

demo:

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

UPDATE:

I just noticed adding this css to my original html and it works too. I'm not sure why, though, since the second selector style is empty ...

 input:checked + p + p { color: red; } p:nth-child(2){}