Add some styling on last-child

Question

I am trying to find last-child on the basic of class and wants to apply some styling but using :last-child selector its not as per expectation. I have a limitation I don't want to use java script and due the elements length is not fixed I can not use nth selector.

Used HTML Markup

<ul>
    <li class="a">First</li>
    <li class="a">Second</li>
    <li class="a">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c">Third</li>        
</ul>

Used Css

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

Any help to how to approach this problem.

`a:last-child` is missing the leading `.` class selector. Same for the others. Is that a typo? — andyb, May 15 '13 at 11:16
I think the OP is asking to apply style to the last child of each class. — Aurelio De Rosa, May 15 '13 at 11:17
please check the demo which i have created - http://jsfiddle.net/WanzY/1/ - Its only getting applied on class c — Soarabh, May 15 '13 at 11:22

Mr. Alien · Answer 1 · 2013-05-15T11:37:15.773

3

If you are trying to target last-child of ul element, than this is enough

ul li:last-child {

}

Demo

Or if you want to style last child of each unique class than you need than last-child won't work here, you need to use nth-of-type instead or a formula like

Demo

ul li:nth-child(3n+3) { /* This way you don't have to use classes too */
    color: red;
}

Note: If you are generating elements dynamically than as of now there's no way to select last-child of element with a unique class. SO you have to use nth-child, nth-of-type or a formula like I mentioned

Other way you can do this is, programatically create an ul element after n iteration and in your loop and use this selector

edited May 15 '13 at 11:37

answered May 15 '13 at 11:15

Mr. Alien

153,751
34
298
278

I think the OP wanted the second option. – Aurelio De Rosa May 15 '13 at 11:19
Want to apply some style on every third element. Not only on last element. please check this demo http://jsfiddle.net/WanzY/1/ – Soarabh May 15 '13 at 11:19
Cant use ul li:nth-child(3n+3) { color: red; } because the element is not fixed – Soarabh May 15 '13 at 11:24
@saorabh I think `last-of-type` should work here, wait I'll work on that – Mr. Alien May 15 '13 at 11:32
@Mr.Alien I tried with last-of-type but no luck with css. :( – Soarabh May 15 '13 at 17:53
@saorabh There's no way you can achieve this in your way, I've provided you few demo and that way it should work – Mr. Alien May 15 '13 at 18:11

Laurent S. · Answer 2 · 2013-05-15T11:28:54.967

1

First of all you're missing the point in front of your classnames, but anyway this wouldn't solve your problem. As you seem to generate your list programmatically , I would suggest adding a class to each last item with a certain class. Or alternatively use Javascript, which you don't want to...

edited May 15 '13 at 11:28

answered May 15 '13 at 11:20

Laurent S.

6,816
2
28
40

`+1` yes, it is not possible with just CSS. This is the simplest solution. – andyb May 15 '13 at 11:26

score 1 · Answer 3 · answered May 15 '13 at 11:41

Suppose it will be easier to add some additional class to specify the last element or by using JS.

For instance, you may do something like this:

<ul>
    <li class="a ">First</li>
    <li class="a ">Second</li>
    <li class="a last">Third</li>    
    <li class="b">First</li>
    <li class="b">Second</li>
    <li class="b last">Third</li>    
    <li class="c">First</li>
    <li class="c">Second</li>
    <li class="c last">Third</li>        
</ul>

And css:

.a{
    color:red;
}
.b{
    color:blue;
}
.c{
    color:green;
}

.a.last{
    color:green;
}

.b.last{
    color:red;
}

.c.last{
    color:blue;
}

http://jsfiddle.net/ud8KZ/1/

score 0 · Answer 4 · answered May 15 '13 at 11:19

0

you are not using dot in last three css class

.a:last-child{
    color:green;
}
.b:last-child{
    color:red;
}
.c:last-child{
    color:blue;
}

I think that's why you are not getting output

answered May 15 '13 at 11:19

Ravi Pal

395
1
7
22

Add some styling on last-child

4 Answers4