@@Gunnar Bittersmann > Dadurch werden viele Regeln mit immer wieder denselben Deklarationen generiert, was das Stylesheet unnötig aufbläht. > > Besser: in der Schleife die Selektorliste zusammenbauen, dann eine Regel generieren: Das kann man aber auch anders haben – einfacher, mit Sass-Bordmittel `@extend`{:.language-scss} ```scss %highlighted { background-color: var(--th-highlight-background-color); color: var(--th-highlight-text-color); } tbody > tr:has(td:hover) > th { @extend %highlighted; } @for $column from 2 through 11 { thead:has(~ tbody td:nth-child(#{$column}):hover) th:nth-child(#{$column}) { @extend %highlighted; } } ``` ☞ [neuer Codepen](https://codepen.io/gunnarbittersmann/pen/LYgZwaO?editors=0100) 🖖 Живіть довго і процвітайте {:@uk} -- *„Ukončete, prosím, výstup a nástup, dveře se zavírají.“*{:@cs}

@@Gunnar Bittersmann > Dadurch werden viele Regeln mit immer wieder denselben Deklarationen generiert, was das Stylesheet unnötig aufbläht. > > Besser: in der Schleife die Selektorliste zusammenbauen, dann eine Regel generieren: Das kann man aber auch anders haben – einfacher, mit Sass-Bordmittel `@extend` ```scss %highlighted { background-color: var(--th-highlight-background-color); color: var(--th-highlight-text-color); } tbody > tr:has(td:hover) > th { @extend %highlighted; } @for $column from 2 through 11 { thead:has(~ tbody td:nth-child(#{$column}):hover) th:nth-child(#{$column}) { @extend %highlighted; } } ``` ☞ [neuer Codepen](https://codepen.io/gunnarbittersmann/pen/LYgZwaO?editors=0100) 🖖 Живіть довго і процвітайте {:@uk} -- *„Ukončete, prosím, výstup a nástup, dveře se zavírají.“*{:@cs}