CSS: are class and id interchangeable?

Question

I know others have asked about using class and id in CSS files, such as

Div: Class vs Id

So I'm aware of the semantic and syntactic differences between class and id: that id should be used for elements that are used only once and class should be used for elements that share attributes in common.

But this isn't a hard-and-fast rule, is it? What's the harm in using an id for more than one element? Or using a class for only one? After all, isn't "one element" just a set (class) with only one thing in it?

Will the browser's CSS interpreter throw an error if I break the rules? I haven't seen it happen.

So why do we have both id and class? Why not just one one or the other and call it good?

Answer 1

CSS won't complain if you do it but Javascript sure will if you want to grab one element by its id.

The real answer is that there is a semantic difference between an identifier for one and only one object and an identifier that can apply to multiple objects. While you can break the rules it is best not to.

There is also one other distinction between the two, an (X)HTML element allows more than one class to be applied like this:

<div class="foo bar"></div>

You can't do that with ids.

Answer 2

duplicate IDs are not allowed; though your browser may or may not care, the notion makes no sense - how can it be an ID if there are duplicates? ;-)

Answer 3

There are many things to say about it. You already know about the semantic meaning of id an class, so I just talk about one case - excluding javascript - when to use an id makes difference: you can refer to elements with an id to navigate inside the page with anchors or from external links: you can link a specific element of an html document with <a href="http://www.site.com/home.html#news&gt; if you want to go directly to the element with id="news". Obviously, you can't to it with classes, because classes are not unique. So, for this and other reasons, is important to have an attribute that identifies an element inside a document.

Answer 4

CSS is not the problem (you just define styles in there), but the document validity.

An id is meant to uniquely identify an element (for whatever purposes you will be using it) so when you have two elements with the same ID no good things will come.

Remember, the "id" attribute is not meant specifically for CSS styling (not as a class, at least), but for other things - specially JavaScript!

I for one wouldn't use "document.getElementById()" if i didn't know what i was going to get in return...

Answer 5

IDs are usefull for elements you know will be unique to each page.

For instance:

• a menu (#menu)
• the central column where you'll put your main content (#content)
• the right column where you put external links (#external-links)

You will probably need very specific rules for these elements (precise, non-relative width & position).

Now each of these elements will contain several instances of a certain type of object:

• #menu will contain .menu-items
• #central will contain .articles
• #external-links will contain .external-link

This subelements are not unique but their layout properties are... thus the use of classes.

And each of these subelements probably have subclasses (like .featured-article) or even some may have an ID (#current-menu-item).

Of course, you can always use classes inplace of IDs but I think using IDs makes it clear about which elements are unique and which are not. Beside, I prefer to have less space-separated names in my class attributes for them to be reasonably readable.

Answer 6

If you have only one element in a given class you're not doing any harm. The difference is only semantic in this case, as all you are doing is simulating an id. However, if you have more than one element with the same id, you'll have problems with page validation, CSS positioning, and Javascript references to that id. It's best to use id and class attributes as they were intended, for the greatest flexibility in styling your page. Remember, you can have an element with a unique id and have it belong to one or more classes at the same time.

Answer 7

In answer to the question 'why do we use both classes and ids for CSS, when you're allowed to have a single instance of a class?', look at it this way.

We don't need IDs for CSS. We could just use single instances of classes.

But we need IDs for JavaScript. So, why not use them in CSS too?

Imagine a world in which IDs were there, but only used for JavaScript.

You'd have to code like this:

<div id="wrapper" class="wrapper">
    <div id="nav" class="nav">

    </div>
</div>

and so on.