Using Numbers as CSS Class or ID Values

This week I found myself in a situation where I needed to apply CSS to an element only on a specified page. The best way to do this is to add an id to the body tag of the said page thus allowing you to apply a style only to that page. The example below shows an ID applied to the body tag. This is good practice when building your sites but sometimes easier said then done when using a Content Management System to dynamically generate your pages.

<body id="home">

The following CSS will apply only to paragraphs on the home page making them red.

body#home p { color: red; }

The easiest way for me to add an ID to my page using Joomla! was to use the article ID as the body ID. I did this by using the following line in my page template:

<body id="<?php echo JRequest::getVar(‘id’); ?>">

This results in:

<body id="69">

Where “69” is the article ID.

I created my style sheet and found the styles were not applying to the page.

body#69 p { color: red; }

Referring to the W3C to try and diagnose the problem I found the following paragraph that gave me the answer I was looking for.

In CSS2, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-); they cannot start with a hyphen or a digit. They 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”.

Despite stating you can’t start an ID or class with a digit you can however start with a unicode character. Therefore 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, <body id="69"> would translate to this in CSS:

body#\36 9 p { color: red; }

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

We have proved that it is technically possible to start you CSS properties with a number but it makes it difficult to read your CSS. The easiest solution and the one I ended up using was to simply add letters before the numbers hence the ID or class no longer starts with a number.

<body id="pg69">

Below are the unicode equivalents escaped incase you decide to use them.

0	1	2	3	4	5	6	7	8	9
\30	\31	\32	\33	\34	\35	\36	\37	\38	\39

This article was posted on 11/20 in CSS

Try a sample pack of 10 Business Cards for free from MOO

Upload images for the first side of your card. Choose up to 10 different images or designs. We accept high resolution JPEG, PNG, GIF or PDF files. Free standard shipping is included.

comments

add comment

What's the matter cat got your tongue? Be the first to comment...

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.

(mi) Mark Inns