CSS chaining adjacent sibling with :checked not working

css, css-selectors, google-chrome, pseudo-class

Solution

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

Problem

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; } ```

Original source

Related problems