Chrome/webkit not rendering css display change on input:checked + element + element

Question

Scenario

I have a CSS selector that is supposed to display sub-content when a label is clicked. The selector is along the lines of input:checked + element +

Answer 1

Chain A Pseudo-Class

This demonstrates that this code fixes the bug (note that nth-child(n) matches any element, but the adding of it into the chain causes it to work):

input:checked + label:nth-child(n) + section {
  display:block;
}

Answer 2

@ScottS provides a solid solution. Another possible one that worked for me and makes more sense from an outsiders "why the heck did they do that" point of view:

input:checked ~ section {
  display:block;
}

which selects every 'section' that come after and are siblings of 'input:checked'.

There are two conditions I can think of where @ScottS's version is superior because the element in the position of 'label' gets selected as well in my solution: (1) 'input's sibling #1 & #2 are the same elements (instead of 'label' & 'section') (2) you are trying to be general by using the '*' selector.

Answer 3

As mdmullinax states, this is an outstanding bug in chrome.

This hack worked for me from the link in the accepted answer:

 body { -webkit-animation: bugfix infinite 1s; }
 @-webkit-keyframes bugfix { from { padding: 0; } to { padding: 0; } }

Answer 4

sounds like a match to Bug 45168 – CSS multiple adjacent sibling selector sequence is ignored if prefixed with a pseudo-class selector

if you swap the <label> and <input> structure in the markup (and adjust the CSS accordingly) it works.

http://jsbin.com/epibin/10/edit

(but now the + - don't toggle)

EDIT:

putting the <label> and <section> in a div container works: http://jsbin.com/epibin/12/edit