How to Select the "Last Child" With a Specific Class Name in Css

How do I select the “last child” of element with specific class name in CSS?

Short answer: you can't do it by CSS, unless you change your HTML structure.

More detail:

:last-of-type pseudo-class, represents the element which is the last sibling of its type in the list of children of its parent element.

Consider this selector: .table-middle:last-of-type.

while .table-middle points the element correctly, the element that has .table-middle class is NOT the last sibling of its type, because the term of type refers to the HTML element itself, not combination of element.class.

Here is the working solution:

HTML

<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
    <thead>
        <tr>
            <th style="width:40px;">ID</th>
            <th>Post title</th>
            <th>Date</th>
            <th>Owner</th>
            <th style="width:100px;">Actions</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td colspan="5"></td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test</td>
            <td>16.7.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>3.8.2013</td>
            <td>Admin</td>
            <td>Delete</td>
        </tr>        
    </tbody>
</table>

CSS

.table tbody tr:last-child td {
    border-bottom:none;
    background:red;
}

Here is the Fiddle

:last-child of Elements with Class

Sadly there is no such selector that can select the last of a class, when there are other elements of the same type after it that have a different or no class. You can only get last of element type (:last-of-type) and last element (:last-child) and a specific element count (:nth-child()). However you are able to count backwards with :nth-last-of-type(2). This would select the second to last element.

.headerWithIcons div {  width: 50px;  height: 50px;  background-color: red;  display: inline-block;}
.headerIcons:last-child {  opacity: .5;}
.headerIconsDIV:nth-last-of-type(2) {  opacity: .5;}

<div class="headerWithIcons">
  <div class="headerIconsDIV">Test</div>  <div class="headerIconsDIV">Test</div>  <div class="headerIconsDIV">Test</div>  <div class="headerIconsDIV">Test</div>
  <!-- Only working when this div has the same class like the  elements above -->    <div class="">Test</div>
</div>

Select :last-child with especific class name (with only css)

No you can't. It's strange as you would think that :last-child would get the last matched possibility but it doesn't work that way. :last-child only finds the very last element, even if you did li.list:last-child That only looks for the last child, sees if it's a li, then sees if they have a class of list. If they do then it matches, if not then no match.

If you can possibly use jQuery then you can easily do this such as in this example (and I'm sure there's other ways): http://jsfiddle.net/eW6S5/173/

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

How can I select the last element with a specific class, not last child inside of parent?

:last-child only works when the element in question is the last child of the container, not the last of a specific type of element. For that, you want :last-of-type

http://jsfiddle.net/C23g6/3/

As per @BoltClock's comment, this is only checking for the last article element, not the last element with the class of .comment.

body {
  background: black;
}

.comment {
  width: 470px;
  border-bottom: 1px dotted #f0f0f0;
  margin-bottom: 10px;
}

.comment:last-of-type {
  border-bottom: none;
  margin-bottom: 0;
}

<div class="commentList">
  <article class="comment " id="com21"></article>

  <article class="comment " id="com20"></article>

  <article class="comment " id="com19"></article>

  <div class="something"> hello </div>
</div>

Using :last-child with class selector

Your statement was: "I want to style the last/second .heading."

That would mean that you would have to write your code like this:

<ul>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
    <li class="heading">Hello world</li>
</ul>

And the CSS:

ul li.heading:last-child {
    background: black;
}
ul li.heading:nth-child(2) {
    background: black;
}

Else, with your current html-code, you would write:

ul li.heading:nth-child(4) {
    background: black;
}
ul li.heading:nth-child(1) {
    background: black;
}

I understand your thought, but the lis with the class "heading" isn't the second or last child.

Apply CSS to last element of specific class

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