Special Characters in CSS Selectors

Special characters in CSS selectors

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+00A1 and higher, plus the hyphen (-)
and the underscore (_); they cannot
start with a digit, or a hyphen
followed by a digit. Identifiers can
also contain escaped characters and
any ISO 10646 character as a numeric
code (see next item).code (see next item).

http://www.w3.org/TR/CSS21/syndata.html#characters

How to select ids which contain special characters?

You can escape special characters with a backslash:

#a\>span\.tex {  color: red;}

<div id="a>span.tex"> Some funky ID </div>

Which characters are valid in CSS class names/selectors?

You can check directly at the CSS grammar.

Basically¹, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must² be a letter or underscore, and the name must be at least 2 characters long.

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

In short, the previous rule translates to the following, extracted from the W3C spec.:

In CSS, identifiers (including element names, classes, and IDs in
selectors) can contain only the characters [a-z0-9] and ISO 10646
characters U+00A0 and higher, plus the hyphen (-) and the underscore
(_); they cannot start with a digit, or a hyphen followed by a digit.
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".

Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

¹ It's all made a bit more complicated by the inclusion of escaped unicode characters (that no one really uses).

² Note that, according to the grammar I linked, a rule starting with TWO hyphens, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

Use of separators with special characters for CSS name selectors

In short YES

As you can see Tailwind Browser Support they cover all major browsers including IE 11.

Also they support accessibility as well with same approach.

So I don't think there is harm in this approach and any search engine will throw an error because its valid CSS selector. You can test it on w3c validator. Also there is no open SEO related issue on their Github Repo. So I believe you can feel free to use this approach.

BTW I just know about this selector lol.

Escaping characters in CSS class selectors

You are getting confused between the class name as present in the DOM, and the escaped version required in CSS. The class name is just specified as is:

elt.classList.add('foo:bar')

It is when this is referenced in a CSS file (or other CSS selector context, such as querySelector) that it must be escaped:

.foo\:bar { color: red; }

The same applies to the case where you choose to use a numeric escape:

elt.classList.add('1234');

.\31 234 { color: red; }

However, no amount of escaping will permit you to have spaces in class names. Spaces are absolutely reserved for delimiting multiple class names on the DOM className attribute.

Special characters in CSS selector

\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.

CSS classes with special characters

Is this class even valid?

It depends on what you're validating against.

profile[~redString] is a valid HTML class name, exemplified by putting the markup through a validator.

However, .profile[~redString] is not a valid CSS selector, because the ~ is a special symbol as you have found out, and it's not in a place where the CSS parser would expect it. When you escape it, you get

.profile[\~redString]

which is a valid selector, but with a completely different meaning. It represents an element with a class name profile, as well as an attribute called ~redString. It does not represent an element with a class name that is exactly profile[~redString].

To match this element, you need to escape the square brackets as well. This will result in the entire stream of characters being treated as a single identifier:

.profile\[\~redString\]

Alternatively, you can use an attribute selector instead to make things cleaner:

[class~="profile[~redString]"]

Notice the ~= in this CSS2.1 attribute selector, which works similarly to a class selector.

See both selectors in action:

:first-child.profile\[\~redString\],:last-child[class~="profile[~redString]"] {  color: red;}

<div>  <div class="profileElement profile[~redString]">123</div>  <div class="profileElement profile[~redString]">456</div></div>

Allowed characters for CSS identifiers

The charset doesn't matter. The allowed characters matters more. Check the CSS specification. Here's a cite of relevance:

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. 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".

Update: As to the regex question, you can find the grammar here:

ident      -?{nmstart}{nmchar}*

Which contains of the parts:

nmstart    [_a-z]|{nonascii}|{escape}
nmchar     [_a-z0-9-]|{nonascii}|{escape}
nonascii   [\240-\377]
escape     {unicode}|\\[^\r\n\f0-9a-f]
unicode    \\{h}{1,6}(\r\n|[ \t\r\n\f])?
h          [0-9a-f]

This can be translated to a Java regex as follows (I only added parentheses to parts containing the OR and escaped the backslashes):

String h = "[0-9a-f]";
String unicode = "\\\\{h}{1,6}(\\r\\n|[ \\t\\r\\n\\f])?".replace("{h}", h);
String escape = "({unicode}|\\\\[^\\r\\n\\f0-9a-f])".replace("{unicode}", unicode);
String nonascii = "[\\240-\\377]";
String nmchar = "([_a-z0-9-]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
String nmstart = "([_a-z]|{nonascii}|{escape})".replace("{nonascii}", nonascii).replace("{escape}", escape);
String ident = "-?{nmstart}{nmchar}*".replace("{nmstart}", nmstart).replace("{nmchar}", nmchar);

System.out.println(ident); // The full regex.

Update 2: oh, you're more a PHP'er, well I think you can figure how/where to do str_replace?

How do I select an element with special characters in the ID?

The problem is that brackets have special meaning in CSS (as attribute selectors) and dots do too, as class selectors. Try $.escapeSelector:

$('#' + $.escapeSelector('Punteggi[@counter].Descrizione'))

This will escape the selector so the special characters don't affect the selection. You could also try using an attribute selector and wrapping that in quotes:

$('[id="Punteggi[@counter].Descrizione"]')

This will literally match that ID and won't treat any of the special characters as special characters.

Scss classnames with special symbols like []

"You can use [TCP] as classname."

As written here (demo) you can use any character for classname except NULL. All you have to do is in CSS write \ before special characters. In your case, it would look like this .\[TCP\].

But I believe it's much easier to just remove the special characters.