Css class not working when name begins with numbers

By Ben on May 19, 2009

I was just playing around with the homepage of the gallery and I found out something I didn’t know about CSS. Similar to ids, you can’t start a css class name with numbers.

Let’s have a look at a real life example.

Consider this simple html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
	<title>Your Site Is Valid</title>
	
	<link href="stylesheet.css" type="text/css" rel="stylesheet" />

</head>

<body>
	<div class="125ads">This is a test</div>
	<div class="ads125">This is another test</div>
</body>
</html>

And add this in your stylesheet:

.125ads
{
	background:#000;
	height:150px;
	width:150px;
}

.ads125
{
	background:#000;
	height:150px;
	width:150px;
	color:#fff;
}

Now what you get in all the browser I have tested (FF3, IE7/8, Chrome, Safari(win), Opera) is that:

classname

The two divs have the excacte same style, and they both have content in them. So the only conclusion I get from this little experiment is “Don’t start your classes names with numbers”.

Related Items and Services:
Do you need drain jetting london ?
If your looking for Loft conversion then come to us.

Posted in Css

4 responses to “Css class not working when name begins with numbers”

Ian Beck
October 12, 2009 at 23:31 | Permalink | Reply

This information is not accurate; you can start CSS classes with a number, but you need to use unicode escape codes in your CSS properties for the first number. For instance, <div class=”404″> would translate to this in CSS:

.\34 04 { /* styles here */ }

\34 is the UTF-8 code for the number 4, and it has to be followed by a space (which will be discarded) so that the engine knows that it’s the end of the code.

Illegible? Yes. But far from impossible. You can figure out character codes for numbers using something like this:

http://rishida.net/tools/conversion/

Just type the number in the first box, hit convert, and check the “UTF-8 code units” box.
Josh L
October 24, 2009 at 00:36 | Permalink | Reply

Wow, fantasitc tip Ian. Saved me a lot of grief!
Kenny G
January 6, 2010 at 15:46 | Permalink | Reply

Awesome, Ian. You saved my project from going down the drain.
Diarmuid C
January 25, 2010 at 22:20 | Permalink | Reply

Who knew?! Great stuff, thanks Ian.