CSS - Visuelle Orientierung in Tabelle

[Gunnar Bittersmann]

@@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

%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

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