Выделить все ячейки одинакового класса в таблице ⇐ CSS

[Anonymous]

В настоящее время у меня есть таблица, которая использует классы для создания групп выделения, которые выделяются при наведении курсора, например:

Код: Выделить всё

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

Однако вместо 5 строк у меня есть около 500 групп выделения, охватывающих в общей сложности около 3000 ячеек. одной группе ярких моментов также может потребоваться время от времени менять названия, разделяться или объединяться с другой; поэтому поддерживать - это боль.
есть ли способ создать какую-то группу захвата, соответствующую произвольному классу в CSS? если это проще, я мог бы также провести рефакторинг html, чтобы поместить группы выделения в какой-нибудь другой атрибут и сделать что-то вроде table:has([hl=hg1]:hover) [hl=hg1]

по сути, мне нужен селектор CSS, который соответствует всем ячейкам, которые имеют общий класс с наведенной ячейкой; что-то вроде:

Код: Выделить всё

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

если вы все еще в замешательстве, вот фрагмент:

Код: Выделить всё

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

Код: Выделить всё

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

моя цель — добиться такого поведения без необходимости указывать hg1, hg2, hg3, hg4 и hg5 внутри самого CSS.


Подробнее здесь: https://stackoverflow.com/questions/798 ... in-a-table