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 + element giving that final element a display of block (default is none). The problem is that it works in all the major browsers with the exception of webkit. Chrome, Safari, and a mobile browser for android (v2.2 sorry, I'm behind the times) all fail to display the element. When I inspect the element in Chrome, it shows that it is supposed to be display: block but it doesn't render it. I can unchec and check the property in developer tools and it displays, but not before.

I assume that this is a bug in webkit.

Question

Here is the multipart question: Is this a known bug in webkit? Am I doing anything wrong with my selectors? And how can I work around the issue for webkit browsers (any creative suggestions)?

Code

HTML

  <input id="c1" type="checkbox">
  <label for="c1">Ein</label>
  <section>Content</section>

  <input id="c2" type="checkbox">
  <label for="c2">Zwei</label>
  <section>Content</section>

  <input id="c3" type="checkbox">
  <label for="c3">Drei</label>
  <section>Content</section>

CSS

input {
  float:left;
  clear:left;
  visibility: hidden;
  position:absolute;
}

label {
  color:green;
  display:block;
  cursor:pointer;
}

section {
  display:none;
}

label:after {
  content:" +";
}

input:checked + label:after {
  content:" -";
}

input:checked + label + section {
  display:block;
}

Demo

Demo: http://jsbin.com/epibin/2
Source: http://jsbin.com/epibin/2/edit

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.