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

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

    

        

            
ID
            
Post title
            
Date
            
Owner
            
Actions
        
    
    

        

            

        
    
    

        

            
1
            
Test
            
16.7.2013
            
Admin
            
Delete
        
        

            
2
            
Test 2
            
3.8.2013
            
Admin
            
Delete
        
        
    

CSS

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

Here is the Fiddle