CSS-ID-Auswahl für Elemente mit gepunkteten IDs

Die CSS-Spezifikation ermöglicht ID-Selektoren zur Identifizierung bestimmter HTML-Elemente. Es tritt jedoch ein Problem auf, wenn eine ID einen Punkt (.) enthält. CSS-ID-Selektoren unterstützen solche IDs nicht nativ.

Trotz der fehlenden klaren Erwähnung in der CSS-Spezifikation wird davon ausgegangen, dass CSS-ID-Selektoren IDs mit Punkten als Kombination aus Tag-Namen und Klassenselektor behandeln. Beispielsweise würde „#id.class“ auf alle Elemente mit der ID „id“ und der Klasse „class“ abzielen.

Das Definieren einer externen CSS-Regel, die auf ein HTML-Element mit einer gepunkteten ID verweist, stellt jedoch eine Herausforderung dar . Die CSS-Spezifikation legt fest, dass ein CSS-„Bezeichner“ das Punktzeichen nicht enthält. Dies führt zu einer potenziellen Diskrepanz zwischen HTML- und CSS-Spezifikationen.

Die alternative Lösung zur Verwendung von CSS-ID-Selektoren besteht darin, andere CSS-Auswahltypen zu erkunden. In Fällen, in denen eine Änderung der HTML-ID jedoch nicht möglich ist, gibt es eine Problemumgehung.

Gemäß der CSS-Spezifikation ist das Escapen von Backslash () zulässig. Um ein HTML-Element mit einer gepunkteten ID anzusprechen, verwenden Sie daher die folgende Syntax:

#some\.id {
  /* CSS Declarations */
}

In diesem Beispiel ermöglicht der Backslash vor dem Punkt dem CSS-Selektor, das Element mit der ID „some.id“ korrekt zu identifizieren.