CODEWITHSUNDEEP
htmlcsscss-selectorscss-tables
dan-lee
dan-lee

Reputation: 14492

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?

Upvotes: 2

Views: 10023

Answers (2)

Christoph
Christoph

Reputation: 51201

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)

Upvotes: 1

Sófka
Sófka

Reputation: 993

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/

Upvotes: 1

Related Questions