Question

I have following CSS:

table tbody tr:last-child td {
  padding-top: 7px;
  border-bottom: 0;
}

table tbody tr:first-child td {
  padding-top: 6px;
}

Now I may have a table with just one row.
The only table row is now assigned to first-child instead of last-child, but I want it to be the other way around.

Is there a way without Javascript?

Answer 1

This can’t be. You must have some mistake in your markup. If it really is the only tr, both last AND first will match.

See example

However, which CSS will be applied depends on the order of you css-rules. So you can determine whether padding-top: 7px; or padding-top: 6px; shall applie by placing the rules accordingly.

edit:

as your problem is caused by a plugin, which inserts a row automatically at the end, you can simply use :nth-last-child(2) to match the second-last element.
_{(Note however that Browser-support for nth-last-child is slightly worse than last-child)}