Style last of type row with CSS

Problem

I have a question. I have a table like the one below

<table>
    <tbody>
        <tr class="unread"><td>Message</td></tr>
        <tr class="unread"><td>Message</td></tr>
        <tr class="unread"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
        <tr class="read"><td>Message</td></tr>
    </tbody>
</table>

I am trying to add a border-bottom on the last .unread with tr.unread:last-of-type but doesn't seem to work.

I am seeking for a pure CSS solution, as the number of unread/read rows are changed dynamically and have no access to code.

Problem courtesy of: Seldimi

Solution

Perhaps look at it a different way: you could get the same result by putting a top border on the first .read row:

.unread + .read td {border-top: 1px solid red;}

Demo

Solution courtesy of: ralph.m

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.