4

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;
}
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Abraham
  • 20,316
  • 7
  • 33
  • 39
  • Works fine for me (`Chrome 30.0.1588.0 Dev`; `Blink 537.36`; `V8 3.20.12.1`) – Cole Tobin Aug 13 '13 at 03:07
  • I'm using Chrome 28. It works OK in FF 23 but not in Opera 15 either. So it must be a browser bug in Webkit. – Abraham Aug 13 '13 at 03:10
  • Does not work for me in `Chrome 28.0.1500.95`, works in IE 10 and Firefox stable for me. – rink.attendant.6 Aug 13 '13 at 03:10
  • @Abraham Chrome 28 was the first version to use Blink. – Cole Tobin Aug 13 '13 at 03:11
  • 2
    I think you have the same issue as described here: http://stackoverflow.com/questions/8320530/webkit-bug-with-hover-and-multiple-adjacent-sibling-selectors For example: http://jsbin.com/abeniy/7/edit – Wesley Murch Aug 13 '13 at 03:14
  • @WesleyMurch Seems like it, thanks! Glad to know it's fixed in the upcoming Chrome versions. – Abraham Aug 13 '13 at 03:16
  • 1
    Just add `:checked ~ p {}` and it works (like magic!): http://jsbin.com/abeniy/7/edit – Wesley Murch Aug 13 '13 at 03:18
  • @WesleyMurch That's awesome, thanks! Gotta love the mysteries of webkit! – Abraham Aug 13 '13 at 03:20
  • @Abraham I've voted to close as dupe, but I'll post the comment as an "answer" to satisfy protocol, if you are happy with this as a solution. You can flag your post for closure in the meantime if you wish. Or not. It's an interesting bug. – Wesley Murch Aug 13 '13 at 03:24
  • @Cole "Cole9" Johnson: Hmm, if this is really fixed in Chrome 30, then it's excellent news. They should consider backporting the fix to WebKit so Apple can use it too. (Why did they even fork it again?) – BoltClock Aug 13 '13 at 09:01

2 Answers2

4

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

Community
  • 1
  • 1
Wesley Murch
  • 101,186
  • 37
  • 194
  • 228
0

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){}
lukeocom
  • 3,243
  • 3
  • 18
  • 30