CSS для выделения «вложенных» строк с использованием атрибутов th и варьируемых строк с помощью селектора :has. ⇐ CSS

[Anonymous]

Я экспериментировал с селектором :has, чтобы посмотреть, смогу ли я создать решение на чистом CSS для выделения строк в «деревовидных» представлениях с использованием таблицы HTML. Я видел решения, использующие , но они работают только для одного уровня «вложенности». Как нам обрабатывать несколько элементов в одной строке и в строках с разными значениями rowspan?
Я придумал кое-что, что работает, но требует селектора для каждого возможного значения rowspan, которое может появиться в таблице. Вы можете себе представить, что если бы эти таблицы генерировались динамически, это не было бы решением, которое можно было бы масштабировать.
Я хотел посмотреть, решил ли кто-нибудь еще эту проблему с помощью современного CSS или мог бы придумать такое способ повторения этого решения, чтобы не создавать правило для каждого значения rowspan.


body {
padding: 50px;
}

table {
width: 100%;
border-collapse: collapse;
}

td,
th {
padding: 20px;
border: 1px solid black;
}

tr:hover th,
tr:hover td,
tr:has(th[rowspan]):has(~ tr:hover) th[rowspan] {
background-color: aqua;
}

tr:has(th[rowspan="2"]):has(+ tr ~ tr:hover) th[rowspan="2"],
tr:has(th[rowspan="3"]):has(+ tr + tr ~ tr:hover) th[rowspan="3"],
tr:has(th[rowspan="4"]):has(+ tr + tr + tr ~ tr:hover) th[rowspan="4"],
tr:has(th[rowspan="5"]):has(+ tr + tr + tr + tr ~ tr:hover) th[rowspan="5"],
tr:has(th[rowspan="6"]):has(+ tr + tr + tr + tr + tr ~ tr:hover) th[rowspan="6"],
tr:has(th[rowspan="7"]):has(+ tr + tr + tr + tr + tr + tr ~ tr:hover) th[rowspan="7"],
tr:has(th[rowspan="8"]):has(+ tr + tr + tr + tr + tr + tr + tr ~ tr:hover) th[rowspan="8"],
tr:has(th[rowspan="9"]):has(+ tr + tr + tr + tr + tr + tr + tr + tr ~ tr:hover) th[rowspan="9"] {
background-color: inherit;
}















































































Мне удалось уменьшить количество повторяющихся селекторов в коде с помощью цикла LESS. , но при этом все равно будет создано более 10 КБ CSS. Должен быть лучший способ сделать это!
.nestedRowHighlight {
// Sets the background color if this row has a th with a rowspan, and a sibling row is being hovered
tr:has(th[rowspan]):has(~ tr:hover) th[rowspan] {
background-color: @hoverColor;
}

.resetAfterSpan(1, ~"");
}

// Adds rules for each rowspan (up to 100) to cancel the th highlight if the row being hovered is passed the rowspan of the th
.resetAfterSpan(@rowSpan, @trSiblings) when (@rowSpan

Подробнее здесь: https://stackoverflow.com/questions/784 ... -using-the