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

Question

I have a HTML table and I want the last row, excluding the row with class .table-bottom, and remove its border-bottom:

Answer 1

You could make it much simpler without using classes at all:

HTML:

<table>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td>...</td>
    </tr>
</table>

CSS:

table {
    width: 500px;
}
table td {  /* style for all the cells between the top and bottom row */
    background: red;
}
table tr:first-child td { /* style for the cells in the top row */
    background: green;
}
table tr:last-child td { /* style for the cells in the bottom row */
    background: blue;
}
table tr:first-child td:first-child, /* first row, first cell */
table tr:first-child td:last-child, /* first row, last cell */
table tr:last-child td:first-child, /* last row, first cell */
table tr:last-child td:last-child { /* last row, last cell */
    background: yellow;
}

Also check the working JSFiddle.

Answer 2

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