Wenn man seinen HTML Code selber schreibt, dann kommt man normalerweise nicht auf die Idee Sonderzeichen in Klassen und ID Namen zu verwenden. Werden aber diese Namen automatisch, wie zum Beispiel beim Einsatz von Frameworks wie Primefaces erzeugt, dann kann es passieren, dass die Klassen oder ID Namen einen Doppelpunkt enthalten. Wenn man jetzt versucht für solche Elemente CSS Regeln zu erstellen, dann wird man schnell daran scheitern, wenn man versucht den Namen so zu verwenden.
In dieser kurzen Beschreibung möchte ich zeigen, wie man dennoch für solche Klassen und IDs CSS Regeln erstellen kann.
Gerade der Doppelpunkt wird ja für die Pseudoselektoren verwendet. Wie kann man aber nun Regeln für, solche Element korrekt erstellen?
Zuerst einmal ein Beispiel, wie es nicht funktioniert. Die Schrift wird hier nicht, wie in der CSS Regel angegeben rot dargestellt:
HTML:
id="searchform:section1"> Dieser Text sollte rot sein.
CSS:
#searchform:section1 {
color: #F00;
}
Die Lösung für das Problem ist eigentlich ganz einfach, hat aber auch noch so seine Tücken. Statt dem „:“ schreibt man einfach „\:“.
Das heißt die Änderung im CSS Bereich würden dann wie folgt Aussehen:
#searchform\:section1 {
color: #F00;
}
Wenn man sich das ganze auf aktuellen Browsern ansieht, dann geht das auch recht problemlos – der Text wird wie geplant in roter Schrift dargestellt. Aber wie so oft machen bei solchen Lösungen ältere Versionen des Internet Explorers Probleme. Aber auch hier gibt es eine einfache Lösung. Statt „\:“ schreibt man einfach „\3a “ (Hexcode für den Doppelpunkt) und schon geht es auch mit älteren Versionen des Internet Explorers.
Mein Tipp lautet daher statt dem „:“ einfach immer „\3a “ zu verwenden und es steht dem Doppelpunkt als Sonderzeichen in Klassen oder ID Namen nichts mehr im Wege.
Das ganze sieht im CSS Code dann so aus:
#searchform\3a section1 {
color: #F00;
}
Die vorgestellte Lösung funktioniert übrigens auch für andere Sonderzeichen. So könnte man auch ein Komma („,“) mit dem Code „\2c “ verwenden. Eine Übersicht der Hexcodes findet man zum Beispiel auf Wikipedia unter:
http://de.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange#ASCII-Tabelle
Der Code und die Beispiele sind auch hier nochmals zu finden:
http://codepen.io/andreasstocker/pen/vruyG?editors=110
Zum besseren Verständnis habe ich noch ein kurzes Video zu diesem Thema erstellt:
