How can I select first element with a specific class

Question

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

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

I want to select first li with class foo, not just first li — rkb
– rkb, Commented Jan 25, 2014 at 5:49

Arun P Johny · Accepted Answer · 2014-01-25 05:54:51Z

6

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

.selected { color: red; }

then

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

Demo: Fiddle

answered Jan 25, 2014 at 5:54

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nnnnnn Over a year ago

+1. I much prefer this to my answer. Same general idea, but much neater to do it in one line with .filter().

nnnnnn · Accepted Answer · 2014-01-25 05:54:42Z

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

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():

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

Nomi Ali · Accepted Answer · 2014-01-25 06:07:38Z

1

do this

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

or

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

edited Jan 25, 2014 at 6:07

answered Jan 25, 2014 at 5:51

Nomi Ali

2,2823 gold badges29 silver badges49 bronze badges

1 Comment

nnnnnn Over a year ago

The question states pretty clearly that only the li elements with class "Foo" should be affected.

Karuppiah RK · Accepted Answer · 2014-01-25 06:00:38Z

0

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

and Html is

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

edited Jan 25, 2014 at 6:00

answered Jan 25, 2014 at 5:48

Karuppiah RK

3,9949 gold badges42 silver badges87 bronze badges

4 Comments

Josh Davis Over a year ago

This doesn't answer the question at all. @rkb wanted the first and last list item with the class of foo to be changed.

rkb Over a year ago

I said I want to select first and last with class foo. So it's second and forth li in this case.

nnnnnn Over a year ago

What if more "foo" elements were added? Then it wouldn't work: jsfiddle.net/2T2yv/15

rkb Over a year ago

This works in this case but what if I add one more li element to the end without class foo, your css will also make that red.

Kunj · Accepted Answer · 2014-01-25 06:03:04Z

You can use jQuery for this:

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

Collectives™ on Stack Overflow

How can I select first element with a specific class

5 Answers 5

1 Comment

Comments

1 Comment

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

1 Comment

4 Comments

Comments

Linked

Related