将样式应用于父级，如果它有css的子级 [英] Apply style to parent if it has child with css

问题描述

如果有 child c，我尝试将样式 / code>元素。

到目前为止，我已经对 child 。但是如果 parent 有，则 $

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 {...} 
  pre> 
 
 
请参阅 CSS4选择器列表。
 
 
 
作为一种替代方法，使用jQuery，一个可以使用的单行将是：
  $（'ul li：has（ul.sub）'）。addClass（'has_sub'）; 
  
然后你可以设置 li.has_sub 。
 
I'm trying to apply styles to the parent if it has child elements.

So far, I've applied styles to the child elements if present. But I want to style the parent if the parent has child, using ONLY CSS.

following is the 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 code
* {
    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;
}
working FIDDLE
解决方案
It's not possible with CSS3. There is a proposed CSS4 selector, $, to do just that, which could look like this (Selecting the li element):
ul $li ul.sub { ... }
See the list of CSS4 Selectors here.

As an alternative, with jQuery, a one-liner you could make use of would be this:
$('ul li:has(ul.sub)').addClass('has_sub');
You could then go ahead and style the li.has_sub in your CSS.

                        
这篇关于将样式应用于父级，如果它有css的子级的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！