CSS - Visuelle Orientierung in Tabelle

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Und ein CSS-Präprozessor ist dabei hilfreich.

Zuerst hatte ich im Codepen zu stehen:

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:

$selectors: "tbody > tr:has(td:hover) > th";

@for $column from 2 through 11 {
	$selectors: "#{$selectors}, thead:has(~ tbody td:nth-child(#{$column}):hover) th:nth-child(#{$column})";
}

#{$selectors} {
	background-color: var(--th-highlight-background-color);
	color: var(--th-highlight-text-color);
}

🖖 Живіть довго і процвітайте

PS: Beachte auch die Umbenennung von $col in $column. 😏