Take last-child instead of first-child on the only table row

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?


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.


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)

You can make a rule which will be only if tr is first-child and last-child at the same time, and this table tbody tr:first-child:last-child td add to the same styles as table tbody tr:last-child td. It will gonna look like this:

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

Here seems to work :) - http://jsfiddle.net/HjZU4/

Need Your Help

Issues with dropdown list not displaying properly

jquery html css drop-down-menu

On my own computer the dropdown list here displays the top option and then the selected option in formatted text within the top bar. However on every other display (mobile, computers which aren't m...

XQUERY: selection of data using non XML columns

db2 xquery

I have DB2 table having following structure