css selector for first list item

Question

I have the following html structure.

<ul>
  <script id="agendaTmpl" type="text/x-jquery-tmpl">
               <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?session_id=${agenda_id}');">

                </li>
    </script>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
 <li class="arrow boundElement" style="height:40px;" onclick="GoToPage('session.html?     session_id=2');"> test</li>
</ul>

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 ul > li:first-child 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.

Please suggest me a way to apply style to the first li of the ul.

Note: I am not allowed to add a new class to the first li.

Answer 1

Try using first-of-type instead:

ul > li:first-of-type

This is a CSS3 selector - so is not completely supported across older browsers. See @Boltclock's answer for much better cross-browser support

Answer 2

It works only if the li is the first child of the ul, i.e. if the script tag is not present.

Exactly.

Since you're using a jQuery template, and you're trying to manipulate the first li to give it a class without modifying the HTML source, you may as well do this all with jQuery:

$('ul > li:first').addClass('first');