web-dev-qa-db-ja.com

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

htmlcsshtml5css3
75
Green Wizard

CSS3では不可能です。ちょうどそれを行うために提案されたCSS4セレクター$があり、これは次のようになります（li要素の選択）。

ul $li ul.sub { ... }

CSS4セレクターのリストはこちら を参照してください。

別の方法として、jQueryを使用すると、利用できるワンライナーは次のようになります。

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

次に、CSSでli.has_subのスタイルを設定します。

65
MildlySerious