an All Creative World site
Ivan's picture

div id vs div class

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:
<!--CSS part:-->
<style type="text/css">
#greenidstyle {color:green}
.redclassstyle {color:red}
</style>
<!--HTML part:-->
<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.

Commenting on this Blog entry is closed.

Apfhex's picture
324 pencils

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

Ivan's picture

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

smithveg's picture
1 pencil

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

iancorey's picture
94 pencils

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.

jasongraphix's picture
26 pencils

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. :)
iancorey's picture
94 pencils

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.

awoyemia's picture
10 pencils

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.

Juice10's picture
21 pencils

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

iancorey's picture
94 pencils

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.

mijlee's picture
500 pencils

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
----------------------

Ivan's picture

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

mijlee's picture
500 pencils

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
----------------------

Anonymous's picture

There is always going to be someone that catches your typo, even if on purpose. However, it can confuse someone just learning code. Thank you fro your information, I found it helpful.

Anonymous's picture

Hey, maybe you could just correct your 'typo' and make your example instantly useful rather than playing tricks on readers who may be seeing this upon first exposure (due to a an evil google search (if you don't want 'noobs' seeing your tricked-out code w/typo's as a first exposure to diff's between id's and tabs, maybe you should tell the goog-robot not to index this page, so people have to go through the necessary introductory pages, so that by the time they reach this '200-course level material', (or maybe late-course '100' level material when you are testing concepts that you are sure your reader already should have down or be expected to know), then this broken example won't be confusing.

Off hand it's a waste of my time to try to figure out your coding errors when all I'm trying to do is figure out the diffs between "id"'s and "classes".

My first reaction upon hitting your purposeful "typo", was to wonder if my browser was broken -- since I'm using FF, and I've had a similar problem in getting styles to apply properly to styled attributes in some CSS styled text elements when composing in TB (which uses a similar code base).

So I have a reason to suspect that non-functional or broken-examples might be the fault of my browser and not some deliberate typo just put in to fool users (again - maybe appropriate to experienced audience, but if not intended for direct-hit by a 'noob', tell the goog-robot to disallow this page as a possible entry page -- they you "regulate" your audience (the viewers) to only those that have been through the "pre-reqs" and are ready for "gotcha's" -- and who have sufficient faith in their browser and ability to understand code that their first instinct is to believe their browser is broken (based on it's performance in TB's composition window.

As it is, I don't see what the "typo" is, and I don't see any good examples of how the code should work. Was there a more basic page, w/o mistakes, that I was supposed to read before I got to this tricky page?

Tnx (but since I'm learning in a short learning timeframe, I'll probably look for some non-broken example rather than wasting my time trying to debug deliberately broken code -- already spent a butt of time writing this feedback. Before I debug code, I first need to learn correct code. *sigh*....

Thanks, 'creativebits (at) tlinx (dot) org';
(can even sign my email w/o registering in case you wish to respond, but it's not expected nor necessary, just didn't want to leave a possibly perceived critical comment w/o also giving a place to answer...:-)

*peace* - (but a bit annoyed at not having the working example I was quickly looking for...but I my 'annoyance' is triggered all too easily, but passes, on most things (especially small things), just as quickly -- like gusts of wind that may blow intensely, but usually have no impact (unless I bother to explain what caused my gust...:-))....
-linda w

P.S. -- why does the web filter on this site decide that this submission could be spam? There is no use of all caps, no hyperlinks, no 'magic' words inviting you to another website or to engage in a transaction to acquire any product. If your 'spam filter' is simply "catching me" because I'm not pre-registered, then it should say so and not prevaricate to opacify the intended meaning.

Anonymous's picture

your post is a complete waste of everyone's timeframe.

Anonymous's picture

Thank you! O_o I'm still a middle experienced webpage maker and I really found this useful! ^-^ I will continue to reccomend this site to others.

Creativebits is a blog about Creativity, Graphic Design, Adobe, Apple and other related subjects.

Featured Images

Do you need a great new logo?

If you need a logo for your company or product you can get it done with us.
In our logo store you can pick from over 28,000 pre-made logos that will be customized to your name for free or you can post a contest for us for just $250 and our designers from all over the world will submit dozens of logo design suggestions to your specific needs.

Marketplace