css selector for ul after div containing a checked checkbox

Question

Is there a way, using minimal css, to select an ul element, which is located directly after a div that contains a checked checkbox? I couldn't find an answer so I hope you guys can help me.

Original model I'm using is here: http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ My goal is to make a div-treeview using minimal, standard css and avoid using js libraries etc.

Here's my setup:

the html:

<div class="css-treeview">
<ul>
    <li>
        <div class="ou">
            <input type="checkbox" id="mychk" />
            <label for="mychk">chktitle</label>
        </div>
        <ul>  <!-- <-- this ul is what I need to select  -->
            <li><!-- some content --></li>
        </ul>
    </li>
</ul>
</div>

and my css:

.css-treeview div.ou + ul  /* for hiding ul's after div with class 'ou' */
{
    display: none;
}

/* I tried something like this but this would select the ul if it was inside */
/* the div, which I don't want */
.css-treeview div.ou > input:checked + ul
{
    display: block;
}

Is there a simple, smart way to select the ul depending on the checkbox state?

Answer 1

Try This Demo

<div class="css-treeview">
<ul>
    <li>
        <div class="ou">
            <label for="mychk">chktitle</label>
            <input type="checkbox" id="mychk" />
            <ul>  <!-- <-- this ul is what I need to select  -->
                <li> some content</li>
            </ul>
        </div>

    </li>
</ul>
</div>


.css-treeview div.ou ul
{
    display: none;
}

.css-treeview div.ou > input:checked + ul
{
    display: block;
}

Answer 2

Thank you all for your comments, I accepted Pete's and Amit's answer, as it helped me a great deal. If anyone needs to accomplish the same as I do, here's some adaptations of what I'm going for:

This one is practically the answer given here:

Html:

<ul class="menutree">
    <li>
        <div class="ou" style="background-color:#B2D1FF;">
            <div class="ou_content">
                Title<br/>
                Other data etc<br/>
                <a href="#">Link</a>
            </div>
            <input type="checkbox" id="item-0-0-1" /><label for="item-0-0-1">&nbsp;&nbsp;V&nbsp;&nbsp;</label>
            <br/>
            <ul>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="ou" style="background-color:#99C2FF;">
                        <div class="ou_content">
                            Title<br/>
                            Other data<br/>
                            <a href="#">Link</a>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </li>
</ul>

And here is css for above: (note I had to add the br to the selector)

body {
    text-align: center;
}

ul {
    display: inline-block;
    padding:0px;
    margin:0px;
    text-align:center;
}

li {
    display: inline-block;
    list-style: none;
    vertical-align:top;
    margin-top:20px;
    margin-right:10px;
    text-align:center;
}

div.ou {
    border:1px solid blue;
    margin:0px;
    margin-right:10px; 
    padding-top:0px;
    padding-left:20px;
    padding-bottom:20px;
    padding-right:0px;
    border-radius:10px;
    text-align:left;
    min-width:100px;
}

div.ou_content {
    min-width:150px;
    padding:4px;
    border:0px solid green;
    margin-top:10px;
    margin-right:10px;
}

label {
    border: 1px solid navy;
    float:right;
    margin-right:0px;
    margin-left:10px;
    display:inline-block;
    cursor:pointer;
    background-color:lightblue;
}


#menutree li {
    list-style: none;
}

.css-treeview input + label + br + ul
{
    display: none;
}

.css-treeview input:checked + label + br + ul
{
    display: inline-block;
    text-align: center;
}

.css-treeview input
{
    opacity: 0;
    display:none;
}

Also I did another proof-of-concept: Here's my own try-out:

Html:

<ol id="menutree">
    <li>
        <div class="contentdiv"> place for content </div>
        <label for="c3" class="menu_label">Title1 &nbsp;&nbsp;V</label>
        <input type="checkbox" id="c3" name="level2" value="1" />
        <ol>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c4" class="menu_label">Title2</label>
                <input type="checkbox" id="c4" name="level3" value="1" />
            </li>
            <li>
                <div class="contentdiv"> place for content </div>
                <label for="c5" class="menu_label">Title3</label>
                <input type="checkbox" id="c5" name="level3" value="1" />
            </li>
        </ol>
    </li>
</ol>

And css for this:

#menutree li {
    list-style: none; 
    text-align: center;
}

li .menu_label + input[type=checkbox] {
    opacity: 0; 
    display:none;
}

li .menu_label {
    cursor: pointer; 
} 

li .menu_label + input[type=checkbox] + ol > li {
    display: none; 
}

li .menu_label + input[type=checkbox]:checked + ol > li {
    display: inline-block; 
    text-align: center;
}

li  :not(.menu_label + input[type=checkbox]:checked + ol > li) {
    display: none;
}

div.contentdiv {
    height:40px;
    padding-top:6px;
}

li {
    border-top:4px solid blue;
    border-right: 2px solid blue;
    border-left: 2px solid blue;
    border-bottom: 0px solid blue;

    border-radius:30px 30px 0px 0px;
    margin-top:20px;
    margin-left:6px;
    margin-right:6px;
    padding-right:10px;
    padding-left:10px;
    display: inline-block;
    vertical-align:top;
    text-align: center;
    height:50px;
    min-width:100px;
}

label {
    border: 1px solid navy;
    padding:0px;
    border-radius:0px;
    vertical-align:top;
    text-align: center;
    margin-left:4px;
    margin-right:4px;
}

body {
    text-align: center;
}

ol {
    display: block;
    padding:0px;
    margin:0px;
}