Search code examples
htmlcssjquery-selectorscss-selectors

css selector for first list item

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.

Solution

  • 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