CODEWITHSUNDEEP
cssspecial-characters
reggie
reggie

Reputation: 3674

Special characters in CSS selector

I found this CSS definition in the semantic UI. They use this style extensively.

.ui.\32.buttons > .button,
.ui.two.buttons > .button {
  width: 50%;
}

I can see what they are trying to accomplish. They want the CSS definition to read

.ui.2.buttons > .button,

It must be ASCII code. Code \32 would be a space. Code \3 would be a "start of text".

Can you explain more what is going on here? Why is the ascii not converted into a space? And why does the W3C CSS validator accept this CSS without errors?

Upvotes: 4

Views: 396

Answers (1)

GolezTrol
GolezTrol

Reputation: 116100

\32 is hexadecimal 32, which translates to decimal number 50, which is indeed the character 2. \31 would be 1.

I found this quote from the W3C specs:

In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They 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”.

I found the quote in this arcticle which puts it in context, but it boils down to the fact that although normally class names cannot start with a number, it is allowed when the number is entered as an escaped character or (in this case) an ISO 10646 numeric code for a character.

Upvotes: 2

Related Questions