Markieren Sie alle Zellen derselben Klasse in einer Tabelle ⇐ CSS

[Anonymous]

Derzeit habe ich eine Tabelle, die Klassen verwendet, um Hervorhebungsgruppen zu erstellen, die hervorgehoben werden, wenn man mit der Maus darüber fährt, etwa so:

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); }

Anstelle von 5 Zeilen habe ich 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. Daher ist die Wartung mühsam.
Gibt es eine Möglichkeit, eine Art Capture-Gruppe zu erstellen, die einer beliebigen Klasse in CSS entspricht? Wenn es einfacher ist, könnte ich den HTML-Code auch umgestalten, um die Hervorhebungsgruppen in ein anderes Attribut einzufügen und so etwas wie table:has([hl=hg1]:hover) [hl=hg1]

zu tun. Grundsätzlich möchte ich einen CSS-Selektor, der alle Zellen abgleicht, die eine Klasse mit der Zelle teilen, auf der sich der Mauszeiger befindet. so etwas wie:

Code: Select all

table:has(.(*):hover) .\1 { background-color: var(--highlight); }

Hier ist ein Ausschnitt, falls Sie immer noch verwirrt sind:

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

Mein Ziel ist es, dieses Verhalten zu erreichen, ohne hg1, hg2, hg3, hg4 und hg5 im CSS selbst angeben zu müssen.