Apply CSS to last element of specific class

Question

I want to apply some CSS to the last blog-post. The problem is that the last element in the div 'blog-posts' is the same type of element as the 'blog-post' divs.

I've tried:

last-of-type
last-child

HTML:

<div class="blog-posts">
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="blog-post"></div>
    <div class="f03-456245"></div>
</div>

CSS:

.blog-post:last-child{
    //do some css
}

`last-child` doesn't work that way. It only selects the element which is the last child and not the last child with a certain class. In this case it would do nothing because the last-child doesn't have the `blog-post` class. You can find more info in this [thread](http://stackoverflow.com/questions/18995362/css-last-child-not-working-as-expected/18995451#18995451). — Harry, Aug 27 '14 at 06:54
If you have always the same number of div can use .blog-posts div:nth-child(4) — Pavel Adrian, Aug 27 '14 at 06:57
possible duplicate of [CSS last-child selector: select last-element of specific class, not last child inside of parent?](http://stackoverflow.com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i) — web-tiki, Aug 27 '14 at 07:11
Another option could be to actually use a list for your "list" of blog articles. http://jsfiddle.net/sheriffderek/quumnr6h/ — sheriffderek, Aug 27 '14 at 07:24

Suresh Ponnukalai · Accepted Answer · 2014-08-27T07:08:43.467

7

Last element using .class is not possible. In your case you can use nth-last-child property.

 .blog-posts div:nth-last-child(2) {
   background: #ff0000;
 }

DEMO

edited Aug 27 '14 at 07:08

answered Aug 27 '14 at 07:03

Suresh Ponnukalai

13,820
5
34
54

7

but this solution only highlights second last element instead of last element of particular class – muneebShabbir Aug 27 '14 at 07:05
You are correct. According to his mockup i have given my solution. – Suresh Ponnukalai Aug 27 '14 at 07:09

score -3 · Answer 2 · answered Aug 27 '14 at 06:56

-3

You may have to do like this:

.blog-posts div:last-child{
  //do some css
}

It is assuming div is the element. It applies for anyother element type p , span etc...

answered Aug 27 '14 at 06:56

sri

338
2
13

Apply CSS to last element of specific class

2 Answers2