Welche Zeichen sind gültig in CSS-Klassennamen/Selektoren?

Question

Welche Zeichen/Symbole sind innerhalb der CSS-Klassenselektoren erlaubt?

Ich weiß, dass die folgenden Zeichen ungültig sind, aber welche Zeichen sind gültig?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

Answer 1

Für diejenigen, die nach einem Workaround suchen, können Sie einen Attributselektor verwenden, wenn Ihre Klasse beispielsweise mit einer Zahl beginnt. Ändern Sie:

.000000-8{background:url(../../images/common/000000-0.8.png);} /* FUNKTIONIERT NICHT!! */

zu diesem:

[class="000000-8"]{background:url(../../images/common/000000-0.8.png);} /* FUNKTIONIERT :) */

Außerdem, wenn es mehrere Klassen gibt, müssen Sie diese im Selektor angeben oder den ~= Operator verwenden:

[class~="000000-8"]{background:url(../../images/common/000000-0.8.png);}

Quellen:

1. https://benfrain.com/when-and-where-you-can-use-numbers-in-id-and-class-names/
2. Gibt es einen Workaround, um CSS-Klassen mit Namen, die mit Zahlen beginnen, gültig zu machen?
3. https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Answer 2

Ich würde nicht empfehlen, etwas anderes als A-z, _- und 0-9 zu verwenden, da es einfacher ist, mit diesen Symbolen zu codieren. Beginnen Sie auch nicht mit Klassen mit -, während diese Klassen normalerweise browser-spezifische Flaggen sind. Um Probleme mit der IDE-Autovervollständigung zu vermeiden, weniger Komplexität, wenn Sie diese Klassennamen aus irgendeinem Grund mit einem anderen Code generieren müssen. Vielleicht funktioniert irgendeine Transpilierungs-Software nicht, usw., usw.

Doch CSS ist ziemlich locker in dieser Hinsicht. Sie können jedes Symbol verwenden, und sogar Emoji funktionieren.

  . {
    border: 2px solid blue;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }

Answer 3

Mein Verständnis ist, dass der Unterstrich technisch gesehen gültig ist. Schau mal hier:

https://developer.mozilla.org/en/underscores_in_class_and_id_names

"...errata to the specification published in early 2001 made underscores legal for the first time."

Der obige verlinkte Artikel sagt, sie nie zu verwenden, und gibt dann eine Liste von Browsern, die sie nicht unterstützen, von denen alle zumindest in Bezug auf die Anzahl der Benutzer längst überholt sind.

Answer 4

Wir können alle Zeichen in einem Klassennamen verwenden. Auch Zeichen wie # und .. Wir müssen sie einfach mit \ (Backslash) escapen.

.test\.123 {
  color: red;
}

.test\#123 {
  color: blue;
}

.test\@123 {
  color: green;
}

.test\<123 {
  color: brown;
}

.test\`123 {
  color: purple;
}

.test\~123 {
  color: tomato;
}

test.123
test#123
test@123
test<123
test`123
test~123

Answer 5

Für HTML5 und CSS 3 können Klassen und IDs mit Zahlen beginnen.