Tabellenformatierung - Zugriff auf nicht verwendete Klasse

[Auge]

Hallo

/*
es werden die Zellen (td) selektiert, die Kinder einer
gehoverten Tabellenzeile (tr) innerhalb von tbody sind
*/
tbody tr:hover td {
    background-color: #ccc;
}

Nope, es werden die Zellen (td) selektiert, die Nachkommen …

Du hast natürlich recht. Es wird jede Tabellenzelle vom Typ td selektiert, die auf irgendeiner Ebene Kind oder Kindeskind der gehoverten Zeile ist. Das gilt auch für td innerhalb einer Tabelle innerhalb der gehoverten Zeile, also wenn in einer Tabellenzelle eine weitere Tabelle notiert ist.

An den Fall habe ich nicht gedacht. Ich bin davon ausgegangen, dass sowas seit den unseligen Zeiten von Tabellenlayout in ernsthaften Projekten nicht mehr gebaut wird und bestenfalls als Altlast existiert, in die man keine neuen Features (wie zum Beispiel eben tr:hover) einbaut.

Wenn also nur die Zellen, die direkte Kinder der gehoverten Zeile sind, selektiert werden sollen, lautet der Selektor:

tbody tr:hover > td {
    background-color: #ccc;
}

Tschö, Auge

PS: Ich habe in deinem Posting den zitierten Codeblock repariert.