Was bedeutet .container.\31 25\25 in CSS?

In CSS können Bezeichner Sonderzeichen enthalten, z der Backslash (). Das Backslash-Zeichen dient in CSS je nach Kontext unterschiedlichen Zwecken.

Escape-Zeichen

Innerhalb einer Zeichenfolge wird ein Backslash gefolgt von einem Zeilenumbruch ignoriert. Außerhalb einer Zeichenfolge repräsentiert ein Backslash, gefolgt von einem Zeilenumbruch, sich selbst.

Escape-Sonderzeichen

Ein Backslash kann verwendet werden, um spezielle CSS-Zeichen zu maskieren, wodurch sie ihre Besonderheit verlieren Bedeutung. Beispielsweise kann ein doppeltes Anführungszeichen (") innerhalb einer Zeichenfolge mit Escapezeichen versehen werden als \".

Unicode-Zeichenreferenzen

Ein Backslash, gefolgt von bis zu sechs hexadezimalen Ziffern ( 0-9a-fA-F) stellt das ISO 10646-Zeichen mit dieser Nummer dar. Zum Abschluss der Referenz wird ein Leerzeichen oder eine zusätzliche hexadezimale Ziffer verwendet.

Im angegebenen Code wird der Backslash () verwendet, um einen Prozentwert im Klassennamen des .container-Elements darzustellen:

.container.\31 25\25 { /* 125% */
  width: 100%;
}

Die Sonderzeichen \31, 25 und \25 stellen die Hexadezimalzahlen für die Zeichen „1“, „%“ bzw. „%“ dar. Daher entspricht dieser Code:

.container[class ~= "125%"] { /* 125% */
  width: 100%;
}

Dieser Klassenselektor entspricht jedem Element mit einer Klasse, die „125 %“ enthält. Die Berechnung für die Breite des Elements lautet wie folgt:

width = (containers * 125%)