[Solved-8 Answers] Which characters are valid in CSS class names / selectors

PROBLEM

What characters/symbols are allowed within CSS class selectors? we know that the following characters are invalid, but what characters are valid?
~ ! @ $ % ^ & * ( ) + = , . / ‘ ; : ” ? > < [ ] \ { } | ` #

SOLUTION 1:

• There are no CSS classes.
• The question logically splits to two questions:
• can you start a class name with a digit in HTML, and if it does, how do you use the corresponding class selector in CSS?
• Various HTML specifications impose various restrictions on class names, but in browser practice, and according to HTML5, there are no limitations, except that a class name cannot contain whitespace characters. So class=000000-8 is valid.
• By CSS syntax rules, a CSS identifier cannot being with an unescaped digit. Therefore, a selector like .000000-8 is invalid. But the digit can be escaped, by CSS escaping rules(http://www.w3.org/TR/css3-syntax/#escaping) the selector
• .\30 00000-8or equivalently,.\00003000000-8 is valid and matches an element with class=000000-8.

SOLUTION 2:

• 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-]*
• Identifiers beginning with a hyphen or underscore are typically reserved for browser-specific extensions, as in -moz-opacity

[ad type=”banner”]

SOLUTION 3:

• The article explains how to escape any character in CSS (and JavaScript),If you were to give an element an ID value of ~!@$%^&*()_+-=,./’;:”?><[]{}|`#, the selector would look like this:

    CSS:

[pastacode lang=”css” manual=”%3Cstyle%3E%0A%20%20%23%5C~%5C!%5C%40%5C%24%5C%25%5C%5E%5C%26%5C*%5C(%5C)%5C_%5C%2B-%5C%3D%5C%2C%5C.%5C%2F%5C’%5C%3B%5C%3A%5C%22%5C%3F%5C%3E%5C%3C%5C%5B%5C%5D%5C%5C%5C%7B%5C%7D%5C%7C%5C%60%5C%23%0A%20%20%7B%0A%20%20%20%20background%3A%20blue%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0AJavaScript%3A%0A%3Cscript%3E%0A%20%09%20%2F%2F%20document.getElementById%20or%20similar%0A%20%20document.getElementById(‘~!%40%24%25%5E%26*()_%2B-%3D%2C.%2F%5C’%3B%3A%22%3F%3E%3C%5B%5D%5C%5C%7B%7D%7C%60%23’)%3B%0A%20%20%09%2F%2F%20document.querySelector%20or%20similar%0A%20%20%24(‘%23%5C%5C~%5C%5C!%5C%5C%40%5C%5C%24%5C%5C%25%5C%5C%5E%5C%5C%26%5C%5C*%5C%5C(%5C%5C)%5C%5C_%5C%5C%2B-%5C%5C%3D%5C%5C%2C%5C%5C.%5C%5C%2F%5C%5C%5C’%5C%5C%3B%5C%5C%3A%5C%5C%22%5C%5C%3F%5C%5C%3E%5C%5C%3C%5C%5C%5B%5C%5C%5D%5C%5C%5C%5C%5C%5C%7B%5C%5C%7D%5C%5C%7C%5C%5C%60%5C%5C%23’)%3B%0A%3C%2Fscript%3E%0A” message=”css selectors” highlight=”” provider=”manual”/]

SOLUTION 4:

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])*
• “-” and “_” are not allowed in your listed character if used directly. But you can encode them using a backslash foo\~bar or using the unicode notation foo\7E bar.

SOLUTION 5:

Any character except NUL is allowed in CSS class names in CSS (If CSS contains NUL ,the result is undefined).

• The links to explanation(http://mathiasbynens.be/notes/css-escapes) and demos (http://mathiasbynens.be/demo/crazy-class)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)(http://www.w3.org/TR/html/infrastructure.html#space-character)  in a class name
• attribute(http://www.w3.org/TR/html/dom.html#classes) , because they already separate classes from each other.
  So, if you need to turn a random string into a CSS class name: look out NUL and space, and escape (accordingly for CSS or HTML).

SOLUTION 6:

• 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”.
• 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
• 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.
• CSS 2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions

[ad type=”banner”]

SOLUTION 7:

CSS Specification:

• 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.
• For instance, the identifier “B&W?” may be written as “B\&W\?” or “B\26 W\3F”.

SOLUTION 8:

• Since HTML5 it’s been valid to start an HTML element ID with a number. For example

[pastacode lang=”css” manual=”%5Bid%3D%2210%22%5D%20%7Bcolor%3A%20red%3B%7D%0A” message=”css selectors” highlight=”” provider=”manual”/]

However, another possibility is to use a unicode character instead of a number. For example, instead of the attribute selector, you can do this:

[pastacode lang=”css” manual=”%23%5C31%200%20%7Bcolor%3A%20red%3B%7D%0A” message=”css coding” highlight=”” provider=”manual”/]

• The same number and selector rules apply with class names.
• You can write a class starting with a number in HTML but to get the selector to work in CSS you either need to use the attribute selector or escape it with unicode.
• To show the prior example with a class instead:

[pastacode lang=”markup” manual=”%3Cdiv%20class%3D%2210%22%3Ehello%3C%2Fdiv%3E%0A” message=”css selectors examples” highlight=”” provider=”manual”/] [ad type=”banner”]

You can either do this:

[pastacode lang=”css” manual=”%5Bclass%3D%2210%22%5D%20%7Bcolor%3A%20red%3B%7D%0A” message=”css selectors examples” highlight=”” provider=”manual”/]

Or this:

[pastacode lang=”css” manual=”.%5C31%200%20%7Bcolor%3A%20red%3B%7D%0A” message=”css tags” highlight=”” provider=”manual”/]

• This article provides some of the basic informations on css form , css coding , form css , selector , css tags , id name , css notes , css selectors examples , css selectors , html select , selector css , css3 selectors , css not selector , select html , css select , css id selector , select option css , html selector , select box css , selection boxes , css parent selector , css element , select dropdown css , css selectors examples , css editor online , css id , form css , css table design , horizontal menu css , custom select box css , css properties , css class selector , dropdown css style , css table generator , external css , inline css , css text effects , css tabs , checkbox css , color css , css dropdown , css hover effects , css button style , img css , css table style , css compressor , css display table , validate css , css checkbox , css zoom , span css , blockquote css , radio button css , css style tag , css footer , css transparent , css background transparent , css clip.