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

@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.