Select: Last-Child with Especific Class Name (With Only CSS)

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>

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

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

Select :last-child, but with specific class

Use :last selector or .last() method on object of item elements:

$('.item:last');//will give third li

or

$('.item').last();//will give third li

---

Related Topics