如何选择具有特定类的第一个元素

I have the following list

我有以下清单

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

I want to change the color of first and last li's, which has class foo, using css

我想用css改变第一个和最后一个li的颜色,它有类foo

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

But it select nothing. Check this fiddle.

但它什么也没做。检查这个小提琴。

How can I select first and last li's with class foo. If it's not possible with css then how can I do it with jQuery.

如何用类foo选择第一个和最后一个li。如果用css不可能那么我怎么能用jQuery做到这一点。

5 个解决方案

#1

I don't think there is a css selector solution for this, you can use jQuery to assign a class

我不认为有一个css选择器解决方案,你可以使用jQuery来分配一个类

.selected {
    color: red;
}

then

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

Demo: Fiddle

#2

I don't think this can be done with just CSS, but it is simple with jQuery. Here's one way:

我认为只用CSS就可以做到这一点,但jQuery很简单。这是一种方式:

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

With:

.someClass {
    color: red;
}

Demo: http://jsfiddle.net/2T2yv/10/

Or a slightly different solution that doesn't repeat .addClass():

或者稍微不同的解决方案,不重复.addClass():

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

#3

do this

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

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

#4

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

and Html is

和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

For better understanding nth-child (pseudo-selector) you can go through this http://css-tricks.com/how-nth-child-works/

为了更好地理解nth-child(伪选择器),您可以浏览http://css-tricks.com/how-nth-child-works/

#5

You can use jQuery for this:

您可以使用jQuery:

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

#1