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 20 November 2009 in CSS
What you have had to say about all this...
Thanks! This was super helpful, I had the same hangup with the CMS part of it.
- Joseph LeeThat'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.
comments