css selector for first list item

Question

I have the following html structure.

Answer 1

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