CODEWITHSUNDEEP
css
Ryan Kruse
Ryan Kruse

Reputation: 35

How can I select the last row of a table with a matched class?

I'd like to put a divider on tables based on the last row to have a class. Table-rows are ordered by this class so it would make sense for me to put the divider on the last row to have that class. I can't seem to nail down the css for that though.

Here is my example: http://jsfiddle.net/kruser/cr9hLg9r/

Sample css

tbody>tr>td {
    border-bottom: 2px solid #eee;
}

tbody>tr.boy:last-of-type>td {
    border-bottom: 2px solid #000;
}

Upvotes: 0

Views: 137

Answers (2)

Bodzio
Bodzio

Reputation: 2520

Ok, so my previous answer was wrong, but I've got another idea. You could use a simple trick like this:

table {
    border-collapse:collapse
}

tr {
    border-top: 2px solid #eee;
}

.girl {
    border-bottom: 2px solid #eee;
    border-top: 2px solid black;
}

demo: http://jsfiddle.net/6ceom4u6/

EDIT:

OK, so I have another solution:

table {
    border-collapse:collapse
    border-bottom: 2px solid #eee;
}

tr {
    border-top: 2px solid #eee;
}

.boy + :not(.boy),
.girl + :not(.girl),
... {
    border-top: 2px solid black;
}

demo: http://jsfiddle.net/6ceom4u6/4/

Upvotes: 3

Quentin
Quentin

Reputation: 943142

CSS does not have a :last-of-other-combination-of-selectors selector, so you can't do this with plain CSS.

It sounds like you would be better off restricting the markup to wrap your tr elements in explicit tbody elements, and then placing the border around the tbodys.

Upvotes: 2

Related Questions