將樣式應用於父項，如果它具有css子項

Question

我試圖將styles應用於parent如果它具有child元素。

到目前爲止，我已將樣式應用於child元素（如果存在）。但我想要styleparent如果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

Answer 1

這是不可能用CSS3。有一個建議CSS4選擇，$，要做到這一點，這可能是這樣的（選擇li元素）：

ul $li ul.sub { ... } 

見list of CSS4 Selectors here。

作爲替代，使用jQuery，一行代碼，你可以利用的是這樣的：

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

然後，您可以繼續前進，風格li.has_sub在你的CSS。