Question

I’ve been developing a site and recently came across that naming a css class or id ‘404’ (with no quotes of course) will not display any styling for the element named 404.

I did not know this until I had to well, create a 404 page and named the element accordingly.
(I’m actually surprised I haven’t run into this before.)

Is there and specific reason behind this?
Excuse my ignorance if it’s something simply obvious, been up for 48 hours coding and was flipping out at first because I thought my browser wasn’t refreshing my css file properly! 😛

Anyway I’ve simply renamed the element and the styling works.

Answer 1

404 is not a valid identifier. You basically have to start an identifier by a letter or an underscore (or maybe some other characters such as $ and -).

Please also not that it doesn’t have anything to do with HTML4/5 .. it’s a CSS rule. CSS identifiers must be conform to the following rules (including in CSS3) :

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”. Note
that Unicode is code-by-code equivalent to ISO 10646 (see [UNICODE]
and [ISO10646]).

In CSS 2.1, a backslash () character can indicate one of three types
of character escape. Inside a CSS comment, a backslash stands for
itself, and if a backslash is immediately followed by the end of the
style sheet, it also stands for itself (i.e., a DELIM token).