title: How to add a class to a li when a child has a particular class
body: <p>I'm a complete beginner so I know this is probably very simple...</p>
  
  <p>I have the following html output for a menu system:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a href="#"&gt;Home&lt;/li&gt;
    &lt;li class="ancestor"&gt;
      &lt;a href="#"&gt;About&lt;/a&gt;   
      &lt;ul&gt;
          &lt;li&gt;
              &lt;a href="#"&gt;Our company&lt;/a&gt;       
          &lt;/li&gt;
      &lt;li class="selected"&gt;
              &lt;a href="#"&gt;Our team&lt;/a&gt;   
          &lt;/li&gt;
      &lt;/ul&gt;
     &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The current page is "Our Team" and so that is flagged as selected. </p>
  
  <p>I would like to be able to add a class to the parent <code>li</code> so that I can style it to be highlighted (selected) when we are on the selected page of a child. i.e. So that the <code>&lt;li class="ancestor"&gt;</code> becomes <code>&lt;li class="ancestor selected"&gt;</code> or something similar.</p>
  
  <p>The HTML is generated from a CMS so my thoughts are that it would be easiest to use some jQuery to do this.</p>