div id vs div class

Submitted by Ivan on Mon, 2005-09-19 20:13.

One of the most popular questions among webdesigners starting to learn CSS is: What is the difference between id and class?

First difference

Ids are to be used only once in your html layout. Classes can be used multiple times.

Generally ids are used for the main elements of the page, such as header, main content, sidebar, footer, etc. Classes are used for elements that will appear several times on your page, but can not be covered by standard html elements. For example menus. The easy way to remember which one of the two should be used only once to think of how many people are out there with your id card number.

Second difference

Ids have priority over classes. So, if an element has a both id and class, the id will take over.

Lets look at an example: <style type="text/css"> #greenidstyle {color:green} .redclassstyle {color:red} </style>  <body> <p id="greenidstyle">first line of copy for id</p> <p class="redclassstyle">second line of copy for class</p> <p id="greenidstyle" class="redclassstyle">third line of copy for combined</p> </body>

And this is what you're actually going to see:

first line of copy for id

second line of copy for class

third line of copy for combined

What happens here? In the first line we define an id to have font color green and the result is green. On the second line we define the class to have font color red and the result is red as expected. In the third line we have assigned both the class and the id to the text, but as you can see the result will actually be green because id takes precedence of over class.

Now, you're probably saying, wait a minute - how can you add the same id to both the first and third line? You're right - it's something we should not do. I just did it for presentation purposes here. This code would work, but would not validate.

Ivan's blog
Login or register to post comments

Actually there's a typo in

Submitted by Apfhex on Mon, 2005-09-19 21:13.

Actually there's a typo in the code for your post and the first line isn't green. But the example still makes sense.

thanks

Submitted by Ivan on Mon, 2005-09-19 21:23.

I just kept it there to check if anyone actually reads through the code. ;)

Thank for your post. From

Submitted by smithveg on Wed, 2008-04-23 03:26.

Thank for your post. From here i getting know the different about id and class.

0 0 0 1al

Submitted by iancorey on Mon, 2005-09-19 21:43.

I understand that the specificity for the id vs. class selector is based on a left-reading scale. The farther left your selector appears the less specific it is.
For example:

p{color:red;} has 0,0,0,1 (just an element)

.red{color:red;} has 0,0,1,0 (just a class)

#content p.red{color:red;} has 0,1,1,1 (an element, class and id)

<inline style tag> has 1,0,0,0 (and trumps all specificity of CSS.)

I find this useful to think about while writing my messy, messy code, so I thought I'd pass it along.

Multiples

Submitted by jasongraphix on Tue, 2005-09-20 00:46.

Great job of keeping it simple Ivan. A few other interesting css tidbits about id and class assignment for beginners:

You can specify only elements inside specific elements in the css by putting a space between the selectors. For example: #bigbox .foo {font-weight:bold;} will make any element with class="foo" inside an element with id="bigbox" bold.
You can assign multiple classes to html element by seperating them with spaces. For example: <p class="foo bluefoo">This Paragraph</p> would get whatever css styles you've assigned in the css for both .foo and .bluefoo.
Finally, assign a set of css rules to multiple selectors by seperating them in the css with commas: html, strong, li, #foobar, .cheese {font-family:"comic sans";} This would apply the font, comic sans, to each of the listed selectors. Please don't do this. :)

Looking to the future...

Submitted by iancorey on Tue, 2005-09-20 02:02.

I've read that you'll be able to select based on attribute values someday.
a[href="index.html"]{color: red;}
Though, I don't know when this will happen.

useful for forms

Submitted by awoyemia on Tue, 2005-09-20 12:05.

I find the attribute selector useful for styling form elements. For instance if I want to change the background color of only the input fields of a form and leave the buttons alone I would use:
input[type="text"] { background: #cd; }

I find this very useful.

you can also

Submitted by Juice10 on Tue, 2005-09-20 06:16.

you can also access the point in the site where the id is by typing in #idname after the url:
http://creativebits.org/webdev/div_id_vs_div_class#comment-14918

Not so much...

Submitted by iancorey on Tue, 2005-09-20 14:53.

I think that you're referring to an html anchor (also called bookmarks — don't call them this). comment-14918 is actually the name of an a href element. That isn't actually an id selector as we use them in CSS.
Forgive me if I'm just misunderstanding.

Good ole DOM

Submitted by mijlee on Tue, 2005-09-20 15:50.

Quite right I think. 2 completely different things.

ID tags are extremely useful when accessing page element via the Document Object Model for things like dynamic user interaction but I don't think you can access them in the same way that you can anchor tags.

----------------------
http://mijlee.com
----------------------

wow

Submitted by Ivan on Tue, 2005-09-20 07:57.

I always said, that my posts are mere conversation starters. The number of tips I learn is just amazing. Thanks guys!

Boxes and styling

Submitted by mijlee on Tue, 2005-09-20 11:47.

The way I try and separate the two is by using IDs for layout tasks with DIVs like width and height tasks and use Class for styling specific elements such as H1-6, paras, lists etc. Not always possible I know but can avoid having to use ugly box model hacks.

----------------------
http://mijlee.com
----------------------