Me...">
Clever Geek Handbook

Style the last line of a type with CSS

I have a question. I have a table similar to the table 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'm trying to add border-bottom

to last .unread

using tr.unread:last-of-type

, but doesn't seem to work.

I am looking for a pure CSS solution as the number of unread / read lines is dynamically changing and has no code access.

+3


source to share


1 answer


Perhaps look at it differently: you can get the same result by putting the top border on the first line .read

:

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


Demo

+2


source






More articles:


All Articles