According to the spec,
Identifiers can also contain escaped characters and any ISO 10646
character as a numeric code (see next item). For instance, the
identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F". [...]
In CSS 2.1, a backslash (\) character can
indicate one of three types of character escape. Inside a CSS comment,
a backslash stands for itself, and if a backslash is immediately
followed by the end of the style sheet, it also stands for itself
(i.e., a DELIM token).
First, inside a string, a backslash followed by a newline is ignored
(i.e., the string is deemed not to contain either the backslash or the
newline). Outside a string, a backslash followed by a newline stands
for itself (i.e., a DELIM followed by a newline).
Second, it cancels the meaning of special CSS characters. Any
character (except a hexadecimal digit, linefeed, carriage return, or
form feed) can be escaped with a backslash to remove its special
meaning. For example, "\"" is a string consisting of one double quote.
Style sheet preprocessors must not remove these backslashes from a
style sheet since that would change the style sheet's meaning.
Third, backslash escapes allow authors to refer to characters they
cannot easily put in a document. In this case, the backslash is
followed by at most six hexadecimal digits (0..9A..F), which stand for
the ISO 10646 ([ISO10646]) character with that number, which must not
be zero. (It is undefined in CSS 2.1 what happens if a style sheet
does contain a character with Unicode codepoint zero.) If a character
in the range [0-9a-fA-F] follows the hexadecimal number, the end of
the number needs to be made clear. There are two ways to do that:
- with a space (or other white space character): "\26 B" ("&B"). In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as
a single white space character.
- by providing exactly 6 hexadecimal digits: "\000026B" ("&B")
In fact, these two methods may be combined. Only one white space
character is ignored after a hexadecimal escape. Note that this means
that a "real" space after the escape sequence must be doubled.
If the number is outside the range allowed by Unicode (e.g., "\110000"
is above the maximum 10FFFF allowed in current Unicode), the UA may
replace the escape with the "replacement character" (U+FFFD). If the
character is to be displayed, the UA should show a visible symbol,
such as a "missing character" glyph (cf. 15.2, point 5).
Therefore, the following are equivalent:
.container.\31 25\25 <--> .container[class ~= "125%"]
.container.\37 5\25 <--> .container[class ~= "75%"]
.container.\35 0\25 <--> .container[class ~= "50%"]
.container.\32 5\25 <--> .container[class ~= "25%"]
Note that escaping is important, otherwise they wouldn't be valid identifiers (emphasis mine):
In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, two hyphens, or a hyphen followed
by a digit.
Therefore, the following are invalid:
.container.125%
.container.75%
.container.50%
.container.25%
Maybe it may be clearer with this fiddle:
.container {
background: red;
margin: 10px;
}
.container.\31 25\25 { /* 125% */
width: 100%;
max-width: 1500px; /* (containers * 1.25) */
min-width: 1200px; /* (containers * 1.00) */
}
.container.\37 5\25 { /* 75% */
width: 900px; /* (containers * 0.75) */
}
.container.\35 0\25 { /* 50% */
width: 600px; /* (containers * 0.50) */
}
.container.\32 5\25 { /* 25% */
width: 300px; /* (containers * 0.25) */
}
<div class="container 125%">125%</div>
<div class="container 75%">75%</div>
<div class="container 50%">50%</div>
<div class="container 25%">25%</div>
