CSS가있는 자식이있는 경우 부모에 스타일 적용

CSS가있는 자식이있는 경우 부모에 스타일 적용

---

이 질문에 이미 답변이 있습니다.

• CSS 부모 선택기가 있습니까? 31 답변

요소 가 styles있는 parent경우 에 적용하려고합니다 child.

지금까지 child요소가있는 경우 스타일을 적용했습니다 . 하지만 내가 원하는 (가) 경우 가 만 사용 .styleparentparentchildCSS

다음은 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

---

CSS3에서는 불가능합니다. $이를 수행하기 위해 제안 된 CSS4 선택기 가 있습니다. 다음과 같이 보일 수 있습니다 ( li요소 선택 ).

ul $li ul.sub { ... }

여기에서 CSS4 선택기 목록을 참조 하십시오 .

대안으로 jQuery를 사용하면 다음과 같은 단일 라이너를 사용할 수 있습니다.

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

You could then go ahead and style the li.has_sub in your CSS.

참고URL : https://stackoverflow.com/questions/21252551/apply-style-to-parent-if-it-has-child-with-css