Dynamic table highlighting with CSS :has

In this BlueSky post the user shows some crazy CSS that allows for dynamic table highlighting. The CSS included in that post was this:

td:has(~ td:hover), /* previous sibling cells */
table:has(td:nth-of-type(3):hover) /* column cells */
tr:not(:first-of-type):has(~ tr:hover)
td:nth-of-type(3) {
    background: var(--highlighted);
}

This CSS should highlight a row up to the cell that is hovered and it should also highlight a column up to the cell that is hovered. After removing the :not(:first-of-type) because I have proper table headers, the CSS seems to do the highlighting well for any row but only works for the 3rd column, as the example table below shows. I'm not sure yet if there's a way to not hardcode the 3 in the CSS to work for any column independently or if I'd have to write selectors explicitly for all columns.