将样式应用于父级,如果它有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;
}
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 theparent
if it haschild
elements.So far, I've applied styles to the
child
elements if present. But I want tostyle
theparent
if theparent
haschild
, using ONLYCSS
.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 theli
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屋!