title: css selector for first list item
body: <p>I have the following html structure.</p>
  
  <pre><code>&lt;ul&gt;
    &lt;script id="agendaTmpl" type="text/x-jquery-tmpl"&gt;
                 &lt;li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');"&gt;
  
                  &lt;/li&gt;
      &lt;/script&gt;
   &lt;li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"&gt; test&lt;/li&gt;
   &lt;li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"&gt; test&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I need to apply class to the first li of the list. 
  The script tag cannot be removed, coz it is a template for the structure. 
  I tried with <code>ul &gt; li:first-child</code> but it is not working. It works only if the li is the first child of the ul, i.e. if the script tag is not present.</p>
  
  <p>Please suggest me a way to apply style to the first li of the ul.</p>
  
  <p>Note: I am not allowed to add a new class to the first li.</p>