web-dev-qa-db-fra.com

Appliquer le style au parent s'il a un enfant avec css

J'essaie d'appliquer styles à parent s'il contient child éléments.

Jusqu'à présent, j'ai appliqué des styles aux éléments child s'ils sont présents. Mais je veux style le parent si le parent a child, en utilisant UNIQUEMENT CSS.

ce qui suit est le 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>

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

travail VIOLON

htmlcsshtml5css3
77
Green Wizard

Ce n'est pas possible avec CSS3. Il existe un sélecteur CSS4 proposé, $, pour ce faire, qui pourrait ressembler à ceci (Sélection de l'élément li):

ul $li ul.sub { ... }

Voir le liste des sélecteurs CSS4 ici .

Alternativement, avec jQuery, un one-liner que vous pourriez utiliser serait le suivant:

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

Vous pouvez ensuite lancer le style li.has_sub dans votre code CSS.

66
MildlySerious