CSS - Visuelle Orientierung in Tabelle
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Und ein CSS-Präprozessor ist dabei hilfreich.
Zuerst hatte ich im [Codepen](https://codepen.io/gunnarbittersmann/pen/xxaYygK?editors=0100) zu stehen:
```scss,bad
tbody > tr:has(td:hover) > th {
background-color: var(--th-highlight-background-color);
color: var(--th-highlight-text-color);
}
@for $col from 2 through 11 {
thead:has(~ tbody td:nth-child(#{$col}):hover) th:nth-child(#{$col}) {
background-color: var(--th-highlight-background-color);
color: var(--th-highlight-text-color);
}
}
```
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:
```scss,good
$selectors: "tbody > tr:has(td:hover) > th";
@for $col from 2 through 11 {
$selectors: "#{$selectors}, thead:has(~ tbody td:nth-child(#{$col}):hover) th:nth-child(#{$col})";
}
#{$selectors} {
background-color: var(--th-highlight-background-color);
color: var(--th-highlight-text-color);
}
```
🖖 Живіть довго і процвітайте
{:@uk}
--
*„Im Vergleich mit Elon Musk bei Twitter ist ein Elefant im Porzellanladen eine Ballerina.“*
— @Grantscheam auf Twitter