css селектор для ul после div, содержащий отмеченный флажок

Есть ли способ, используя минимальный css, выбрать элемент ul, который расположен сразу после div, который содержит флажок? Я не смог найти ответ, поэтому надеюсь, что вы, ребята, сможете мне помочь.

Оригинальная модель, которую я использую, находится здесь: http://acidmartin.wordpress.com/2011/09/26/css3-treevew-no-javascript/ Моя цель состоит в том, чтобы создать представление дерева элементов с использованием минимального стандартного CSS и избежать использования JS библиотеки и т. д.

Вот мои настройки:

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>

и мой 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;
}

Есть ли простой, умный способ выбрать ul в зависимости от состояния флажка?

Источник

2 ответа

Решение

Попробуйте это демо

<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;
}
Источник

Спасибо всем за ваши комментарии, я принял ответ Пита и Амита, так как он мне очень помог. Если кому-то нужно сделать то же самое, что и я, вот несколько вариантов того, что я собираюсь сделать:

Это практически ответ, данный здесь:

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>

И вот css для выше: (обратите внимание, я должен был добавить br к селектору)

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;
}

Также я сделал еще одно подтверждение концепции: вот моя собственная попытка:

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>

И CSS для этого:

#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;
}
Источник
Другие вопросы по тегам