[Home]CSS identifiers

HomePage | RecentChanges | Preferences | Newbie Help

CSS FAQs

Short, wrong, somewhat usable answer

A CSS identifier begins with a letter. Following that may be one or more letters, digits, or hyphen-minus characters (sometimes called "hyphen" or "dash").

Full, correct answer

CSS1 and CSS2 differ in their identifier syntaxes. In addition, the CSS2 syntax has changed by the work of a correction. Some browsers follow the original CSS2 syntax; some follow the amended syntax.

In the [CSS1 grammar], an identifier must match ident as follows.

unicode \\[0-9a-f]{1,4}
latin1 [¡-ÿ]
escape {unicode}|\\[ -~¡-ÿ]
stringchar {escape}|{latin1}|[ !#$%&(-~]
nmstrt [a-z]|{latin1}|{escape}
nmchar [-a-z0-9]|{latin1}|{escape}
ident {nmstrt}{nmchar}*

Note that characters outside the range of U+0020 to U+00FF cannot appear as themselves. The representation of these characters must be an escape sequence, like

 \2014

for em dash (U+2014). Characters in the range U+0020 to U+00FF that are not letters, are not digits, and are not hyphen-minus require escaped representation. So if we have an element type, 'some.type', we could represent it in a selector as

 some\.type

or as

 some\2Etype

or as

 some\002Etype

If we have a class named class_name we could represent it in a selector as

 .class\_name

or as

 .class\5Fname

or as

 .class\005Fname

The familiar European digits (0..9) and the hyphen-minus (-) must be escaped in a starting position. If we have a class named -some-class we could represent it in a selector as

 .\-some-class

or as

 .\2Dsome-class

or as

 .\002Dsome-class

Since digits following a backslash will always be interpreted as part of a numeric escape sequence, there is no direct escape mechanism for them. If we have a class named 1-some-class we could represent it in a selector as

 .\31-some-class

or as

 .\0031-some-class

The situation gets trickier when the character to follow a numeric escape sequence is itself allowed in numeric escape sequences. Something is needed to mark the following character as distinct from the escape sequence. If we had an element type, 'some.element', the selector

 some\.element

would match as expected, but the selector

 some\2Eelement

would not. The four characters \2Ee form a single escape sequence representing the character U+02EE, "modifier letter double apostrophe". To fix this mismatch, we can add an escape sequence:

 some\2E\65lement

The [CSS2 grammar] allows bare any character outside the range U+0000 to U+007F. In other words, non-ASCII characters are allowed, even at the start of an identifier.

CSS2 numeric escape sequences can include up to six hexadecimal digits, which exceeds the CSS1 limit of four. CSS2 numeric escape sequences may also include trailing white space, which can be one of a space (U+0020), a tab (U+0009), a line feed (U+000A), a form feed (U+000C), a carriage return (U+000D), or a carriage return/line feed sequence (U+000D U+000A).

Meeting the six-digit limit is yet another way to separate escape sequence from literal characters:

 some\00002Eelement

White space can serve the same function:

 some\2E element

These methods are both incompatible with CSS1 browsers.

Due to a [change] issued on 3 April 2001, underscore is now allowed bare in CSS2 identifiers. Bare underscore is allowed even at the start of CSS2 identifiers. Bare underscore is not compatible with CSS1 browsers or with correctly designed early CSS2 browsers.


HomePage | RecentChanges | Preferences | Newbie Help
This page is read-only | View other revisions
Last edited March 20, 2003 9:25 pm (diff)
Search:

This FAQ is happily hosted by Betadome Digital Media