css selector for first list item
css, css-selectors, html, jquery-selectors
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
Problem
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.