css селектор для первого элемента списка

У меня есть следующая структура html.css селектор для первого элемента списка

<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>

Мне нужно применить класс к первому элементу списка. Невозможно удалить тег сценария, поскольку он является шаблоном для структуры. Я пробовал с ul > li:first-child, но он не работает. Он работает только в том случае, если li является первым дочерним элементом ul, т. Е. Если тег сценария отсутствует.

Пожалуйста, предложите мне способ применения стиля к первому li из ul.

Примечание: Мне не разрешено добавлять новый класс в первый ли.

источник

2012-05-14 Raghav

«Невозможно удалить тег сценария» Да, может и да, он должен. У вас есть недопустимый html. – PeeHaa

@Raghav, вы хотите, чтобы выбранный элемент списка был выделен – freebird

@ RepWhoringPeeHaa: Я знаю, что его можно удалить технически. Но мне не разрешено. И я не забочусь, если это действительный html, потому что он создается некоторым плагином, и я не хочу разорвать любой существующий код. @freebird: да. Мне нужно применить углы к первой li. мне кажется, что работает первый тип. – Raghav

Попробуйте использовать first-of-type вместо:

ul > li:first-of-type

Это селектор CSS3 - так не полностью поддерживаются через старые браузеры. См. Ответ @ Boltclock за гораздо более эффективную кросс-браузерную поддержку.

источник

2012-05-14 09:11:34

Charm ... U nailed it .. :) – Raghav

Проблема с поддержкой браузера особенно важна, поскольку jQuery не поддерживает ': first-of-type'. – BoltClock

с jquery это работает для меня $ ("ul> li: first-of-type") очень хорошо. Но поскольку я использую его через css, это нормально, если вышеперерыв. – Raghav

Он работает только в том случае, если li является первым дочерним элементом ul, то есть если тег сценария отсутствует.

Точно.

Поскольку вы используете шаблон Jquery, и вы пытаетесь манипулировать первый li дать ему класс, не изменяя источник HTML, вы можете также сделать все это с JQuery:

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

источник

2012-05-14 09:11:33 BoltClock

css селектор для первого элемента списка

ответ

Смежные вопросы