Nehmen Sie last-child anstelle von first-child auf der einzigen Tabellenzeile

Question

Ich habe folgendes CSS:

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

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

Jetzt habe ich vielleicht eine Tabelle mit nur einer Zeile.
Die einzige Tabellenzeile ist jetzt first-child zugewiesen statt last-child, aber ich möchte es umgekehrt haben.

Gibt es einen Weg ohne Javascript?

Answer 1

Sie können eine Regel erstellen, die nur dann gilt, wenn tr gleichzeitig first-child und last-child ist, und diese tabelle tbody tr:first-child:last-child td zu denselben Stilen hinzufügen wie tabelle tbody tr:last-child td. Es wird so aussehen:

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

Hier scheint es zu funktionieren :) - http://jsfiddle.net/HjZU4/

Answer 2

Dies kann nicht sein. Sie müssen einen Fehler in Ihrer Markup haben. Wenn es wirklich das einzige tr ist, werden sowohl last ALS AUCH first übereinstimmen.

Beispiel ansehen

Welches CSS angewendet wird, hängt jedoch von der Reihenfolge Ihrer CSS-Regeln ab. Sie können also bestimmen, ob padding-top: 7px; oder padding-top: 6px; angewendet wird, indem Sie die Regeln entsprechend platzieren.

Bearbeitung:

Da Ihr Problem durch ein Plugin verursacht wird, das automatisch eine Zeile am Ende einfügt, können Sie einfach :nth-last-child(2) verwenden, um das vorletzte Element anzupassen.
_{(Beachten Sie jedoch, dass die Browser-Unterstützung für <code>nth-last-child</code> etwas schlechter ist als für <code>last-child</code>)}