Der schwer fassbare CSS-Selektor für die Gruppierung von Nachkommen

Während CSS leistungsstarke Optionen für die Gestaltung von Elementen bietet, ist die Möglichkeit, Nachkommen einfach zu gruppieren, ein bemerkenswerter Mangel . Diese Einschränkung wird deutlich, wenn komplexe Elemente wie HTML-Tabellen gestaltet werden, bei denen die Zuweisung des gleichen Stils sowohl für Spaltenüberschriften als auch für Zellen umständliche Selektoren erfordert.

Das Dilemma der Nachkommen-Styling

Betrachten Sie das folgende Tabellenbeispiel:

  ...
  

Um sowohl die Überschriften als auch die Zellen mit einem einzigen Selektor zu formatieren, würde man normalerweise Folgendes verwenden:

#myTable th, #myTable td {}

Dieser Ansatz ist jedoch ausführlich und mühsam, wenn es um eine große Anzahl von Elementen geht.

Der (th, td) Selektor: Eine verpasste Gelegenheit

Ein intuitiverer Die Syntax wäre die Verwendung eines Gruppierungsselektors ähnlich wie:

#myTable (th, td) {}

Leider existiert eine solche Syntax in CSS nicht.

Die Sinnlosigkeit von Vorschlägen aus der Zeit vor 2008

Wie sich herausstellt, ist das Fehlen eines Nachkommengruppierungsselektors seit langem ein Problem. Frühe Versuche, eine solche Klasse einzuführen, wie etwa die 2008 vorgeschlagene Pseudoklasse :any(), hatten keinen Erfolg.

Neueste Entwicklungen und ein Hoffnungsschimmer

Der Arbeitsentwurf für Selectors Level 4 führt jedoch das Konzept einer Gruppierungs-Pseudoklasse, :matches(), wieder ein. Obwohl dieser Vorschlag vielversprechend ist, ist die Browserunterstützung noch in weiter Ferne.

Alternative Lösungen

In der Zwischenzeit gibt es einige Problemumgehungen für die Gruppierung von Nachkommen:

• Verwenden des *-Selektors:

  #myTable tr > * {}

  (Beachten Sie, dass dies davon ausgeht, dass tr-Elemente nur td- oder th-Elemente enthalten und nicht andere Elemente)

• Bleiben wir beim ausführlichen th, td-Ansatz für maximale Leistung

Schlussfolgerung

Das Fehlen eines Die Auswahl der Nachkommengruppierung in CSS ist seit vielen Jahren ein anhaltendes Problem. Während die jüngsten Vorschläge einen Hoffnungsschimmer bieten, ist eine umfassende Browserunterstützung nach wie vor schwer zu erreichen. Bis dahin müssen sich Entwickler auf alternative Ansätze verlassen oder sich mit der Ausführlichkeit des vorhandenen th, td-Selektors abfinden.