title: Apply style to parent if it has child with CSS
body: <p>I'm trying to apply <code>styles</code> to the <code>parent</code> if it has <code>child</code> elements.</p>
  
  <p>So far, I've applied styles to the <code>child</code> elements if present. But I want to <code>style</code> the <code>parent</code> if the <code>parent</code> has <code>child</code>, using ONLY <code>CSS</code>.</p>
  
  <p>following is the <code>html</code></p>
  
  <pre><code>&lt;ul class="main"&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa
          &lt;ul class="sub"&gt;
              &lt;li&gt;bbbb&lt;/li&gt;
              &lt;li&gt;bbbb
                  &lt;ul&gt;
                      &lt;li&gt;cccc&lt;/li&gt;
                      &lt;li&gt;cccc&lt;/li&gt;
                      &lt;li&gt;cccc&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li&gt;bbbb&lt;/li&gt;
              &lt;li&gt;bbbb&lt;/li&gt;
              &lt;li&gt;bbbb&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
      &lt;li&gt;aaaa&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the <code>css</code> code</p>
  
  <pre><code>* {
      margin:0;
      padding:0;
      text-decoration:none;
  }
  .main li {
      display:inline-block;
      background:yellow;
      color:green;
  }
  .main &gt; li &gt; ul &gt; li {
      background:orange
  }
  .main &gt; li &gt; ul &gt; li &gt; ul &gt;li {
      background:pink;
  }
  </code></pre>
  
  <p>working <a href="http://jsfiddle.net/wizam/TDV54/">FIDDLE</a></p>