Which characters are valid in CSS class names/selectors?

can css class name start with number
css class name starts with
css selectors
html valid class
special characters in html class
css class
css name
css hyphen in class name

What characters/symbols are allowed within CSS class selectors? I know that the following characters are invalid, but what characters are valid?

~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < [ ] \ { } | ` #

You can check directly at the CSS grammar.

Basically1, a name must begin with an underscore (_), a hyphen (-), or a letter(az), followed by any number of hyphens, underscores, letters, or numbers. There is a catch: if the first character is a hyphen, the second character must2 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+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). 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.

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

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

Which characters are valid in CSS class names/selectors?, It cannot start with a digit, starting with the digit is acceptable by HTML5 but not acceptable by CSS. Which characters are valid in CSS class names/selectors? A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z)/ (A-Z) which is followed by any numbers, hyphens, underscores, letters. It cannot start with a digit, starting with the digit is acceptable by HTML5 but not

To my surprise most answers here are wrong. It turns out that:

Any character except NUL is allowed in CSS class names in CSS. (If CSS contains NUL (escaped or not), the result is undefined. [CSS-characters])

Mathias Bynens' answer links to explanation and demos showing how to use these names. Written down in CSS code, a class name may need escaping, but that doesn’t change the class name. E.g. an unnecessarily over-escaped representation will look different from other representations of that name, but it still refers to the same class name.

Most other (programming) languages don’t have that concept of escaping variable names ("identifiers"), so all representations of a variable have to look the same. This is not the case in CSS.

Note that in HTML there is no way to include space characters (space, tab, line feed, form feed and carriage return) in a class name attribute, because they already separate classes from each other.

So, if you need to turn a random string into a CSS class name: take care of NUL and space, and escape (accordingly for CSS or HTML). Done.

CSS Quick Tip: The Valid Characters in a Custom CSS Selector, In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-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. A Basic Valid CSS Class Name. A valid name should start with an underscore (_), a hyphen (-) or a letter (a-z) which is followed by any numbers, hyphens, underscores, letters. A name should be at least two characters long. Cannot start with a digit, two hyphens or a hyphen followed by a number.

Read the W3C spec. (this is CSS 2.1, find the appropriate version for your assumption of browsers)

edit: relevant paragraph follows:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-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). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

edit 2: as @mipadi points out in Triptych's answer, there's this caveat, also in the same webpage:

In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with '-' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:

'-' + vendor identifier + '-' + meaningful name 
'_' + vendor identifier + '-' + meaningful name

Example(s):

For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.

Other known examples:

 -moz-box-sizing
 -moz-border-radius
 -wap-accesskey

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.

Authors should avoid vendor-specific extensions

Which characters are valid in CSS class names/selectors, Using class or ID, we write our selector names and then using it with a dot or a hash prefix. Of course, we learned how a valid name should look  Any character except NULL is allowed in CSS class names/Selectors. A CSS Selectors selects an element and applies style on that particular element. CSS Class name/selectors are a name must begin with a letter(a – z), underscore (_), a hyphen (-), or a, followed by any number of hyphens, underscores, letters, or numbers.

I’ve answered your question in-depth here: http://mathiasbynens.be/notes/css-escapes

The article also explains how to escape any character in CSS (and JavaScript), and I made a handy tool for this as well. From that page:

If you were to give an element an ID value of ~!@$%^&*()_+-=,./';:"?><[]{}|`#, the selector would look like this:

CSS:

<style>
  #\~\!\@\$\%\^\&\*\(\)\_\+-\=\,\.\/\'\;\:\"\?\>\<\[\]\\\{\}\|\`\#
  {
    background: hotpink;
  }
</style>

JavaScript:

<script>
  // document.getElementById or similar
  document.getElementById('~!@$%^&*()_+-=,./\';:"?><[]\\{}|`#');
  // document.querySelector or similar
  $('#\\~\\!\\@\\$\\%\\^\\&\\*\\(\\)\\_\\+-\\=\\,\\.\\/\\\'\\;\\:\\"\\?\\>\\<\\[\\]\\\\\\{\\}\\|\\`\\#');
</script>

Class and ID Selectors, In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-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. Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML. w3schools .com THE WORLD'S LARGEST WEB DEVELOPER SITE

The complete regular expression is:

-?(?:[_a-z]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])(?:[_a-z0-9-]|[\200-\377]|\\[0-9a-f]{1,6}(\r\n|[ \t\r\n\f])?|\\[^\r\n\f0-9a-f])*

So all of your listed character except "-" and "_" are not allowed if used directly. But you can encode them using a backslash foo\~bar or using the unicode notation foo\7E bar.

How to Use Classes in CSS to Style an HTML Element – Beginner , Since HTML5 it's been valid to start an HTML element ID with a number. In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters  Which characters are valid in CSS class names/selectors? You can check directly at the CSS grammar.. Basically 1, a name must begin with an underscore (_), a hyphen (-), or a letter(a–z), followed by any number of hyphens, underscores, letters, or numbers.

How to reference a long class name with spaces in CSS?, Any character except NULL is allowed in CSS class names/Selectors. A CSS Selectors selects an element and applies style on that particular  The .class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class. You can also specify that only specific HTML elements should be affected by a class. To do this, start with the element name, then write the period (.) character

Selecting HTML5 id and class names that start with a number in CSS, To escape it , the code point for the character 1 is U+0031, so you would escape it HTML5 supports numbers as id and class name , but css selector have some rules ,. A valid name should start with a letter (a-z)[A-Z] , an underscore (_), or a  div[class^="tocolor-"], div[class*=" tocolor-"] { color:red } In the place of div you can add any element or remove it altogether, and in the place of class you can add any attribute of the specified element. [class^="tocolor-"] — starts with "tocolor-".

Which characters are valid in CSS class names/selectors?, What characters/symbols are allowed within CSS class selectors? I know that the following characters are invalid, but what characters are  The :valid selector selects form elements with a value that validates according to the element's settings. Note: The :valid selector only works for form elements with limitations, such as input elements with min and max attributes, email fields with a legal email, or number fields with a numeric value, etc.

Comments
  • Related question: stackoverflow.com/questions/2812072/…
  • what about utf8 characters? Like i may type in greek
  • Special characters can be used in class names by escaping them - in your CSS file you can define a .hello/world class by escaping the backslash: .hello\2fworld, hello\2f world or hello\/world
  • Another related question, not about "syntax of names", but about "syntax of class attribute" when expressing multiple names.
  • You can also use emoji. npmjs.com/package/postcss-modules-emoji-classname
  • NB: The W3C says that the use of a leading '-' or '_' should be reserved for vendor-specific CSS extensions (e.g., -moz* classes implemented by Mozilla browsers).
  • The \-escapes are commonly used, but generally mostly for the purposes of CSS hacks, isolating browsers that don't support them.
  • To update @Pim Jager's comment over two years later, according to w3counter.com/globalstats.php IE6 is now used by less than 3% of users, behind IE9 on 4%, IE7 on 9%, IE8 on 22%. All versions of Firefox have 28%, all versions of Chrome have 17%.
  • I know this is an old answer, but CSS (at least 2+) allows any {Non-ASCII} character in identifiers.
  • 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". So - --indent1 is invalid and needs to be escaped as \--indent1 (-- classes break on iOS, for example)
  • The first line of your answer should be "most answers here are outdated/apply only to CSS2".
  • @SalmanA The answers I refer to were wrong from the beginning. They neither apply to CSS2.1, CSS2 nor CSS1.
  • @RobertSiemer good point, I moved my comment to stackoverflow.com/questions/50812118/… (which is never the less related to this topic)