css selectors - What does .container.31 2525 mean in CSS?

Question

In the code below, I am wondering what the backslash might mean? I have not encounter the backslash character in the lessons I've been taking. This piece of code is used to identify browser sizes, I believe.

.container.31 2525 {
  width: 100%;
  max-width: 1500px;  /* max-width: (containers * 1.25) */
  min-width: 1200px;  /* min-width: (containers) */
}
.container.37 525 { /* 75% */
  width: 900px;       /* width: (containers * 0.75) */
}
.container.35 025 { /* 50% */
  width: 600px;       /* width: (containers * 0.50) */
}
.container.32 525 { /* 25% */
  width: 300px;       /* width: (containers * 0.25) */
}

Answer 1

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 "B26 W3F". [...]

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:

1. 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.
2. by providing exactly 6 hexadecimal digits: "00026B" ("&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 2525   <-->   .container[class ~= "125%"]
.container.37 525    <-->   .container[class ~= "75%"]
.container.35 025    <-->   .container[class ~= "50%"]
.container.32 525    <-->   .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 2525 { /* 125% */
  width: 100%;
  max-width: 1500px;  /* (containers * 1.25) */
  min-width: 1200px;  /* (containers * 1.00) */
}
.container.37 525 { /* 75% */
  width: 900px;       /* (containers * 0.75) */
}
.container.35 025 { /* 50% */
  width: 600px;       /* (containers * 0.50) */
}
.container.32 525 { /* 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>