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:

    

        
...
        
...
        
...
        
...
        
...
    
    

        
...
        
...
        
...
        
...
        
...
    
    

        
...
        
...
        
...
        
...
        
...
    
    

        
...
        
...
        
...
        
...
        
...
    

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.