Применить стиль к родителю, если у него есть ребенок с css [дубликат]

этот вопрос уже есть ответ здесь:

  • Есть ли Родительский селектор CSS? 27 ответов

Я пытаюсь подать заявку styles до parent если это child элементы.

до сих пор я применял стили к child элементы, если они присутствуют. Но я хочу style the 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>

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

работающего скрипка

1 64
html css css3 html5

1 ответ:

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

ul $li ul.sub { ... }

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

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

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

вы могли бы пойти дальше и стиль li.has_sub в вашем CSS.

56