Div with ID or CLASS? confused

[shyne]

Hi

Whats the difference between id & class in a div tag?
Which one should be used and in what situation?


Thanks for the info on this.

Shyn3

[alexjewell]

id's are used when it will only be applied to ONE div.
classes are used when it's required more than once.

Example:



<div id="onlyone"></div>
<div class="multipleones"></div>
<div class="multipleones"></div>
<div class="multipleones"></div>

[mwinter]

id's are used when it will only be applied to ONE div.
classes are used when it's required more than once.

Yes, and remember to think ahead: just because there might only be one now, there may be more in the future. Use the id attribute when something is truely unique.

There is an exception: if the element needs to be accessed from a script, assigning it an id attribute value makes obtaining a reference to the element much easier.

[alexjewell]

There is an exception: if the element needs to be accessed from a script, assigning it an id attribute value makes obtaining a reference to the element much easier.


True, mwinter, but you still don't want to use an id more than once. If I recall, there's a thing in javascript that calls things by their class, too. getElementsByClass('classhere') or something?

[mwinter]

True, mwinter, but you still don't want to use an id more than once.

Quite, and I hope I didn't imply otherwise. An id attribute value must be completely unique within a document; it cannot be duplicated.



If I recall, there's a thing in javascript that calls things by their class, too. getElementsByClass('classhere') or something?

No, there isn't. However, one can write such a function with the aid of the getElementsByTagName method.

[shyne]

Thanks alot makes alot sense to me now.

[djr33]

Doesn't class also affect CSS?

[mwinter]

Doesn't class also affect CSS?

Yes, class names can be used in selectors. A class (or pseudo-class) is more specific than an element name, but less specific than id attribute values and in-line style declarations.

[shyne]

One more question. In my page I have everything with class, there is no id attribute. i have two columns, left column is a menu and right menu is the content and sometimes when I access the page it messes up the content column and shifts it position to the bottom of left column. Someone suggested I rename the class name and I tried that too but it didn't work. What could be causing this??

[mwinter]

One more question. In my page I have everything with class, there is no id attribute. i have two columns, left column is a menu and right menu is the content and sometimes when I access the page it messes up the content column and shifts it position to the bottom of left column.

It's possible that the combined width of each column exceeds the width of the containing element.