包含已选中复选框的div之后的div的CSS选择器

Question

我正在寻找一种纯css方式来隐藏/显示<div class="chapter">块的内容：

<div>
    <input id="_1" type="checkbox">
    <h2>
    <label for="_1">Collapse 1</label>
    </h2>
</div>
<div class="chapter">
    Content 1
</div>

<div>
    <input id="_2" type="checkbox">
    <h2>
    <label for="_2">Collapse 2</label>
    </h2>
</div>
<div class="chapter">
    Content 2
</div>

我当前的尝试（ tl; dr ：滚动到底部）：

/* Niceties */

*:focus{
    outline: none;
}

label {
    cursor : pointer;
    display: block;      
}


/* Checkboxes are hidden, and replaced with a right/down pointing 
   arrow, depending on selection state. Note that I want this 
   arrow to be placed *before* the h2 */

div > input { 
    display           : inline-block; 
    -webkit-appearance: none; 
    -o-appearance     : none; 
    -moz-appearance   : none;  
}

div > input:before { 
    content: "\25b6  ";     /* right-pointing arrow */ 
    display: inline-block;      
}

div > input:checked:before { 
    content: "\25bc  ";     /* down-pointing arrow */
    display: inline-block; 
}

/* And here's the problem: how to make the checkbox affect the div 
   after the checkbox' parent div? */

/* (show) */
input + h2 + div.chapter {   /* this obviously does not work */
    display: none; 
}

/* (hide) */
(div + input:checked) + div.chapter {  
    /* this selector is pseudo-code of what I really need, but 
       how to accomplish this kind of grouping? */
    display: block;  
}

this question的已接听答案通过将要受影响的元素放入<input>周围的<div>来更改HTML的结构。我希望我的<div>结构保持不变，因为我需要它来设置<h2>的样式。

请注意，我显然没有使用jquery或javascript标记，我想知道这里是否有纯CSS解决方案，我没有看到（甚至意识到）。