Jump to content

Class vs. ID


Recommended Posts

I believe IDs have to be unique in order to have valid XHTML (possibly HTML too). So imagine a forum system, where each post row has an ID called 'postrow', that would not make the ID unique, so you'd have to use the classes instead.
Link to comment
Share on other sites

ID are good/neccessary when: parsing, using Javascript, CSS stuff etc.

For instance to highlight a row you'd need the ID of that table row.

Also, it is better for styling, like:
<td class="box" id="left"> </td>
<td class="box" id="center"></td>
<td class="box" id="right"></td>

Because you've used class and id you can now assign all the boxes styles, and then tweak each specific one.
Link to comment
Share on other sites

Yeah, but according to W3C all ids have to be unique in order to be valid XHTML:[quote]An "id" is a unique identifier. Each time this attribute is used in a document it must have a different value. If you are using this attribute as a hook for style sheets it may be more appropriate to use classes (which group elements) than id (which are used to identify exactly one element).[/quote]

So you could just use an id attribute on things you know you will be using javascript on.
Link to comment
Share on other sites

Hmmmm -- I'm surprised no one has said this before:

A class definition can be used many times on a single page -- for example, a paragraph or a span can have the class [b].bold[/b] and this can be used throughout the page, many times.  It is typically a more general style.

An ID definition is more restrictive, and each ID should only appear once on a page.  An example of this is #submenu --> or using the id="current" for navigation, to show which page a person is on.  There is only going to be one submenu on the page with this style, or only one tab can be "current".  If you use IDs multiple times, you can get interesting results in different browsers.

Introduction to IDs vs. Classes:

Uses the id="current" for navigation (classic tutorial):

Lots & Lots of General Help on CSS:
Link to comment
Share on other sites

so what is the point in using id's when you can only use them once when you could easily forget you have already used it and muck up ???

i alway use classes, but sometime use id's for no particular reason other than doing stuff differently :P
Link to comment
Share on other sites

[QUOTE]IDs have a higher specificity rating, making them overrulling over classes. So when you give something a class and an ID, the ID's rules come first.[/QUOTE]
Also, Javascript can only call ID's, unless you use the Prototype Library's dollar function.
Link to comment
Share on other sites

[quote author=ShogunWarrior link=topic=99592.msg394005#msg394005 date=1152457364]
For instance to highlight a row you'd need the ID of that table row.

no necessarily. there are many other ways to reference a specific object (by name, element, etc). however, using the getElementById() function is definitely the easiest way. in fact, you could use javascript to cycle through and pull all the rows on a page of a specific style if you wanted to as well. it would take a bit more coding, but it's possible.

all that to say, i think that the principles behind some of the posts above are the biggest benefits to you: keep in mind that if it's a major section of your page (header, content, navigation, footer, etc), you need to use an ID (for reasons mentioned above). But, on the other hand, if you are wanting to assign styles that may be used more than once, by all means, use a class so you can assign the attributes wherever you'd like. also, keep in mind that each element can have multiple classes, but only one ID as well.
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.