Situations to use DIV over CLASS

Question

Ok, so I posted this up in this thread (Difference between div id and div class) but was instructed to post it up as an individual question. I get the answers in the previous thread but wanted more clarification on the subject.

I am fairly new to css, so the conversation over DIV and CLASS interests me. I have built a site using wordpress which has allowed multiple ID's. I am interested if there really is anything wrong with this? For example, this code displays four boxes in two columns, two rows within the container...

<div id="container">
    <div id="sub_container"
    </div>
    <div id="sub_container"
    </div>
    <div id="sub_container"
    </div>
    <div id="sub_container"
</div>

If I have specific styling that is different to the WP theme, obviously then it can be applied to the div or the class?

So in the case above I might have

#sub_container {background: #ffffff; position: relative; float: left;}

So I want to figure is this OK? If not, what is the benefit of having the sub container as a class rather than a div? I get the 'unique' argument, but if this works fine, why not use it?

In my code I have used classes for some headings and sections where I want specific formatting that varies from the built in formatting, but that's about it..

..I figure I would use class if I wanted to apply different styles to the sub_container div? e.g. might want the second one to have red fonts, or have the boxes a different size on another page etc etc?

It does **NOT** work fine (non-unique IDs). Code a bit in JavaScript or with forms and you'll see soon enough! Classes and IDs work perfectly the way they're intended for nowadays (and will still work that way in a distant future). [Embrace the standards](http://www.webplatform.org/) (that was a request from your future colleagues, screaming at the code they'll need to debug) — FelipeAls, Jul 06 '14 at 13:25
In your sample markup, your opening div tag is missing the closing right arrow. — Rob, Jul 06 '14 at 13:34
Heh - thanks Felipe, I will embrace it! The comments have been very useful! Should not be too hard to change them up to classes rather than divs.. — adrunis84, Jul 06 '14 at 14:15

andrew · Answer 1 · 2014-07-06T13:26:50.200

2

Id's should always be unique, having the same Id may "work" from a css point of view but two vehicles do not have the same registration number and two people do not have the same social security number.

ID = Identity.

If you want to apply the same style to multiple elements use the class instead

markup

<div id="container">
    <div class="sub_container">
    </div>
    <div class="sub_container">
    </div>
    <div class="sub_container">
    </div>
    <div class="sub_container">
</div>

css

.sub_container {background: #ffffff; position: relative; float: left;}

edited Jul 06 '14 at 13:26

answered Jul 06 '14 at 13:20

andrew

9,313
7
30
61

[id = unique identifier](http://www.w3.org/TR/html401/struct/global.html#h-7.5.2) (but that'd be a good definition too. Same etymology I think ;) ) – FelipeAls Jul 06 '14 at 13:28
To emphasize what @FelipeAls said, id uniqueness is not a "should", it's a MUST: "This name must be unique in a document." – Rob Jul 06 '14 at 13:32

score 2 · Answer 2 · answered Jul 06 '14 at 13:28

Other developers will expect ids to be unique. This means that if you use what is expected to be a unique id when you should use a reusable class, you will at some point experience unexpected behavior when using 3rd party software.

For example, with jQuery you will find this behavior.

//jQuery selecting by id
$('#sub_container') //will find one of the elements with the sub_container id.

//jQuery selecting by class
$('.sub_container') //will find all elements with the sub_container class.

I'll emphasize that there's a particular class of developers out there: the developers of browsers! And they too expect ids to be unique, as per the spec :) +1 — FelipeAls, Jul 06 '14 at 13:44

Guffa · Accepted Answer · 2014-07-06T15:07:57.167

2

An id should be unique in the page. That's not just a rule that the standars tell us, it's the entire point of setting an identifier on an element.

You should use the id when it is an element that really only appears once in the page. If you have a page footer that would be a good use of an id, as you only have one footer. For any element that can appear more than once, a class is better used. This applies even if the element actually only appears once, it just goes along with the intention of the attributes.

"I get the 'unique' argument, but if this works fine, why not use it?"

There is two problems with this:

You don't know that it works fine in all current browsers, not to speak of all the browsers and browser versions coming in the fututre.
It dosn't work fine when you go beyond CSS. If you for example want to access the element using Javascript, you see that the id gets almost completely useless if you have duplicate id attributes in the page.

edited Jul 06 '14 at 15:07

answered Jul 06 '14 at 13:30

Guffa

687,336
108
737
1,005

It also doesn't work if you use it as an anchor target as intended, so you could argue that it doesn't work in current browsers. – jme11 Jul 06 '14 at 13:44
Good one @jme11 `for/id` on labels and form inputs too http://codepen.io/anon/pen/Avsnf and that's just the visible part. Getting their value server-side will be... mmh *it's complicated©* – FelipeAls Jul 06 '14 at 13:50
Ok cool, all the answers received so far have been very constructive and helpful - plus they make absolute sense. I really just wanted to clarify in my mind the importance and what not. specifically reading about unexpected circumstances with 3rd party tools, javascript and future browsers has been really useful. Thanks All, it is good to enforce the importance of this especially as I am self teaching myself CSS... – adrunis84 Jul 06 '14 at 14:13

Situations to use DIV over CLASS

3 Answers3