title: How to make a parent --> node relationship in css?
body: <p>Can someone help me to fix this <code>parent -&gt; node</code> relationship in css.<br>
  To make it clear, let's see some example:  </p>
  
  <p><a href="http://jsfiddle.net/MyNameIsCode/KyQNY/" rel="nofollow">Css: Parent and child relationship</a>  </p>
  
  <p>Rules:  </p>
  
  <ol>
  <li>All first Parent should be colored in Blue</li>
  <li>All sub parent should be colored in Orange</li>
  <li>All child should be colored in Green  </li>
  </ol>
  
  <p>It is considered as a parent if it has 1 or more sub node/child.<br>
  It is considered as a child if it has no sub node/child.  </p>
  
  <p>It means:  </p>
  
  <pre><code>Parent1-child2-Subparent1-child1  
  </code></pre>
  
  <p>and  </p>
  
  <pre><code>Parent1-child2-Subparent1-child2  
  </code></pre>
  
  <p>should be colored in green.<br>
  No script is allowed. Only css, and as much as possible, should be cross browser compatible. Please help, I can't figure out the logic of it.</p>