Markieren Sie alle Zellen derselben Klasse in einer Tabelle ⇐ CSS

[Anonymous]

Ich habe eine Tabelle, die Klassen („Hervorhebungsgruppen“) verwendet, um zu unterscheiden, welche Zellen hervorgehoben werden sollen, wenn der Mauszeiger über eine einzelne Zelle bewegt wird. Um dies zu erreichen, verwende ich CSS wie folgt:

Code: Select all

table:has(.hg1:hover) .hg1,
table:has(.hg2:hover) .hg2,
table:has(.hg3:hover) .hg3,
table:has(.hg4:hover) .hg4,
table:has(.hg5:hover) .hg5 { background-color: var(--highlight); }

Ich habe jedoch insgesamt etwa 500 Hervorhebungsgruppen, die sich über etwa 3.000 Zellen erstrecken. Gelegentlich muss eine Highlight-Gruppe auch ihren Namen ändern, sich aufteilen oder sich mit einer anderen zusammenschließen. Die Wartung ist also mühsam.
Gibt es eine Möglichkeit, meinen 500 Zeilen langen Selektor durch eine einfachere Anweisung zu ersetzen? Ich brauche nur, dass es mit „allen Zellen, die eine Klasse mit der Zelle teilen, über die sich der Mauszeiger befindet“ übereinstimmt.
Grundsätzlich möchte ich dieses Verhalten erreichen, ohne hg1, hg2, hg3, hg4 und hg5 im CSS angeben zu müssen:

Code: Select all

:root {
--highlight: #238b47;
}
table:has(.hg1:hover) .hg1,
table:has(.hg2:hover) .hg2,
table:has(.hg3:hover) .hg3,
table:has(.hg4:hover) .hg4,
table:has(.hg5:hover) .hg5 { background-color: var(--highlight); }

Code: Select all

 1 2 3 4 5
 6 7 8 9 0
1011121314
1516171819
2021222324