Как выбрать первый элемент с определенным классом

Question

У меня есть следующий список

<ul class="list"> 
     <li>1</li> 
     <li class="foo">2</li> 
     <li class="foo">3</li> 
     <li class="foo">4</li> 
     <li>5</li> 
    </ul> 

Я хочу изменить цвет первого и последнего li's, который имеет класс foo, используя CSS

.list .foo:first-child, 
.list .foo:last-child { 
    color: red; 
} 

Но он ничего не выбирает. Проверьте это fiddle.

Как выбрать первый и последний li's с классом foo. Если это невозможно с помощью css, то как это сделать с помощью jQuery.

Answer 1

Я не подумайте, что для этого есть селекторное решение css, вы можете использовать jQuery для назначения класса

.selected { 
    color: red; 
} 

затем

$('.list li.foo').filter(':first, :last').addClass('selected') 

Демо: Fiddle

Answer 2

.list .foo:nth-child(2n) 
{ 
    color: green; 
} 

и Html является

<ul class="list"> 
    <li>1</li> 
    <li class="foo">2</li> 
    <li class="foo">3</li> 
    <li class="foo">4</li> 
    <li>5</li> 
</ul> 

Fiddle

Для лучшего понимания п-й ребенок (псевдо-селектор), вы можете пройти через этот http://css-tricks.com/how-nth-child-works/

Answer 3

сделать это

$('.list li.foo').filter(':first, :last').css("color", "red"); 

или

$('.list li.foo:first,.list li.foo:last').css("color", "red"); 

Answer 4

Я не думаю, что это может быть сделано только с помощью CSS, но просто с JQuery. Вот один из способов:

var $lis = $("ul.list li.foo"); 
$lis.first().addClass("someClass"); 
$lis.last().addClass("someClass"); 

С:

.someClass { 
    color: red; 
} 

Демо: http://jsfiddle.net/2T2yv/10/

Или несколько иное решение, которое не повторяется .addClass():

var $lis = $("ul.list li.foo"); 
$lis.first().add($lis.last()).addClass("someClass"); 

Answer 5

Вы можете использовать jQuery для этого:

$('.list li.foo').first().css('color', 'red'); 
$('.list li.foo').last().css('color', 'red');