Is there a way to select an element that isn't child? - css

Question

Is there a way to select an element that isn't child? I'm not't really sure how to word this or explain it. Hopefully the code will speak for itself:
Fiddle: http://jsfiddle.net/kBhgV/3/
HTML:
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
CSS:
[title=section-2] {
display: none;
}
input:checked ~ [title=section-2] {
display: block;
}
Is there a way that when you check the box, it will show section-2 without making section-2 a child of section 1?

Answer 1

change your code from
<div title="section-1">
<div>
<input type="checkbox" id="item-1">
<label for="item-1">Item 1</label>
</input>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
to
<input type="checkbox" id="item-1"/>
<div title="section-1">
<div>
<label for="item-1">Item 1</label>
</div>
</div>
<div title="section-2">
<div>Test Drop</div>
</div>
then your css should work fine. You can set the visiblity of your checkbox to hidden and position it absolutely somewhere off the page.
my site uses a similar technique for the navigation so you can see how it works by inspecting the code.
http://www.aktof.ca/
changed your fiddle
http://jsfiddle.net/kBhgV/4/