How to filter tr last child and not first child

Question

See the example below. Is it possible to apply the bottom border to the <tr> in the <thead>, by using CSS selectors?

Edit: It is the only row there. There is also the possibility of no <thead> and <tbody> at all.

table {
    border-collapse: collapse;
}
caption, th, td {
    text-align: left;
    line-height: 1.4;
    padding: 8px;
}
tr {
    border-bottom: 1px solid #ccc;
    vertical-align: top;
}
tr:last-child {
    border-bottom: 0;
}

<h2>Tables</h2>
<table>
    <caption>Optional table caption.</caption>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

Answer 1

You could use a combination of the :not()/:only-child pseudo classes to prevent the element from being selecting if it is the only child:

Updated Example

tr:last-child:not(:only-child) {
    border-bottom: 0;
}

In this instance, you could also swap :only-child out with :first-child since you want to negate the first child.

Updated Example

tr:last-child:not(:first-child) {
    border-bottom: 0;
}

---

You could also just narrow the selector down so that only tr elements within the tbody are selected:

Example Here

tbody tr:last-child {
    border-bottom: 0;
}

..or you could just explicitly set a border on the tr element within the thead..

Answer 2

thead{border-bottom:1px solid #f00;}

It is as simple as that