css selector for first list item

Question

I have the following html structure.

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');