Search code examples
cssgoogle-chromecss-selectorspseudo-class

CSS chaining adjacent sibling with :checked not working

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