Sunday, 18 August 2013

How do I select the “last child” of element with specific class name in CSS=?iso-8859-1?Q?=3F?=

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

So I have a nice HTML table and I want the last row excluding row with
class .table-bottom, and remove its border-bottom:
<table cellpadding="0" cellspacing="0" style="width:752px;" class="table">
<tr class="table-top"><th style="width:40px;">ID</th> <th>Post title</th>
<th>Date</th> <th>Owner</th> <th style="width:100px;">Actions</th></tr>
<tr class="table-middle"><td>1</td> <td>Test</td> <td>16.7.2013</td>
<td>Admin</td> <td>Delete</td></tr>
<tr class="table-middle"><td>2</td> <td>Test 2</td> <td>3.8.2013</td>
<td>Admin</td> <td>Delete</td></tr>
<tr class="table-bottom"><td colspan="5"></td></tr>
.table tr th {
color:#929191;
font-weight:bold;
font-size:14px;
text-align:left;
padding-left:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr th:last-child {
border-right:none;
}
.table tr td {
color:#929191;
font-weight:bold;
font-size:12px;
padding:19px;
border-right:1px solid #d7d7d7;
border-bottom:1px solid #d7d7d7;
}
.table tr td:last-child {
border-right:none;
}
.table .table-middle:last-of-type td {
border-bottom:none;
background:red;
}
.table tr.table-middle td:first-child {
text-align:center;
}
.table tr th:first-child {
text-align:center;
padding-left:0px;
}
.table tr.table-bottom td {
border-right:none;
border-bottom:none;
}
But it's not working....You can see here: http://jsfiddle.net/VAqSw/ ,
.table .table-middle:last-of-type td is not working... please can you help
me solve this? Thanks!

No comments:

Post a Comment