Подтвердить что ты не робот

Применить стиль к родительскому, если он имеет дочерний элемент с css

Я пытаюсь применить styles к parent, если у него есть элементы child.

До сих пор я применял стили к элементам child, если они есть. Но я хочу style parent, если parent имеет child, используя ТОЛЬКО CSS.

следует html

<ul class="main">
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa
        <ul class="sub">
            <li>bbbb</li>
            <li>bbbb
                <ul>
                    <li>cccc</li>
                    <li>cccc</li>
                    <li>cccc</li>
                </ul>
            </li>
            <li>bbbb</li>
            <li>bbbb</li>
            <li>bbbb</li>
        </ul>
    </li>
    <li>aaaa</li>
    <li>aaaa</li>
    <li>aaaa</li>
</ul>

код CSS

* {
    margin:0;
    padding:0;
    text-decoration:none;
}
.main li {
    display:inline-block;
    background:yellow;
    color:green;
}
.main > li > ul > li {
    background:orange
}
.main > li > ul > li > ul >li {
    background:pink;
}

работает FIDDLE

4b9b3361

Ответ 1

Это невозможно с CSS3. Существует предлагаемый селектор CSS4, $, чтобы сделать именно это, что может выглядеть так (выбор элемента li):

ul $li ul.sub { ... }

Смотрите список селекторов CSS4 здесь.

В качестве альтернативы, с jQuery, одним слоем, который вы могли бы использовать, было бы следующее:

$('ul li:has(ul.sub)').addClass('has_sub');

Затем вы можете продолжить и стилизовать li.has_sub в своем CSS.