Highlight all cells of identical class in a table
18:43 17 Jan 2026

currently, I have a table which highlights groups like this:

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

however, I have ~100 highlight groups in total over ~1,000 cells; and sometimes the names of a highlight group may change, or split, or combine; making maintaining it very hard to maintain. (ie, ~100 lines of selectors for this one background-color rule)

is there a way to make some kind of capture group to match an arbitrary class in css? if it's easier, I could also refactor the html to put the highlight groups in some other attribute and do something like table:has([hl=hg1]:hover) [hl=hg1]

css css-selectors