Topic: class VS id what is the difference (Page 1 of 1)

What is the difference between the id and the class identifier of an object?

When would one apply a style on a class level compared to doing it on an ID?

Thanks

Check out http://www.ozoneasylum.com/Forum8/HTML/000376.html .

The basic idea is that an ID can be used only once, much like, say, a social security number, or a fingerprint. use it to identify key parts of the page.

A class, on the other hand, encompasses many objects; it's a broader range of things. Many things can be in the same class, and one thing may be in multiple classes.

Yup, we had a good discussion about it in the thread Slime linked to. As to when you would use classes and IDs, well, if you're only going to have a single element of that type on the page (for example, a "content" or "body" div), you might want to go with an ID. If it's a style that you're going to use more than once (for example, a particular style for the first paragraph in every section, or a style for all your H2 headers), then you'd obviously want to go with classes.

Thanks. That clears that all up nicely.

Forgive the cross posting but:

Started FAQ on this and threw a few things in:

:FAQ:

___________________
Emps

FAQs: Emperor

I am wondering does the class and ID tagging interact with one another in the sense that the following:
<div class=shoppingCartItem id=8877>displays item in side bard shopping cart style</div>
<div class=itemDisplay id=8877>displays the item in the center of the page</div>

If I add a style to #8877 that will apply to both classes?
Can I some how specify that the styling for that ID only occur if it is a part of class itemDisplay?

I have a hack answer to this which is my id should be itemDisplay8877 or shoppingCartItem8877 which will then allow me to address each ID within a sudo context of its class.

Any better ideas?

Thanks

You can do what you are trying to do, but not the way you are trying to do it.

As was said above, and ID can only occur once in your html.

So, having two items both with id="8877" will cause a multitude of problems.

However, you can use CLASS repeatedly, and any item can have more than one class.

So, you can define the main styles for the item in one class, and any styles that might change based on other factors in another.

Thus you could have

<div class="8877" class="shoppingCartItem"> displays item in side bard shopping cart style</div>
<div class="8877" class="itemDisplay"> displays the item in the center of the page</div>

Which would give both <div>'s the styles that are associated with class ".8877" and each item the specific styles for the .shoppingcartitem and .itemdisplay respectively.

Now, this part Im; nit entirely certain on, but I believe that if you have conflicting style specifications, the value in the *last* listed class is predominant.

So, if you specified -

.8877 {
color:blue;
}

and

.shoppingCartItem {
color:red;
}

Since class="shoppingCartItem" is the last class listed in the <div> tag, the color would be red.


Make sense?







[This message has been edited by DL-44 (edited 01-27-2003).]

Note that your ID for the merchandise being sold does not correspond with an ID for an HTML element. As DL said, no two HTML elements can have the same ID.

There are a few errors in DL's post that should be noted:

<div class="8877" class="shoppingCartItem"> displays item in side bard shopping cart style</div>

This is incorrect; the correct syntax is:

<div class="8877 shoppingCartItem"> displays item in side bard shopping cart style</div>

(Note that the multiple classes are separated by spaces.)

Secondly, neither an ID nor a class may begin with a number. So 8877 is neither a valid ID nor a valid class name. Change it to something like "itemNumber8877" or something.

Thirdly; "I believe that if you have conflicting style specifications, the value in the *last* listed class is predominant."

Actually, the order of the classes in the HTML doesn't make a difference. It's the order of the style sheet that matters. So whichever color you specify last for either of the two classes will be the one taken on by elements that are members of both classes.

Ahhh, ok. Thanks for the clarifications Slime.

Haven't used multiple classes in a while...was a little sketchy on it (and didn't have the time to look it up since I'm at work...supposed to be uh...working ).
I didn't realize that a class couldn't start with a number either.

Good info.

So far so good this is all clicking together nicely. I have a question about this:

"
Thirdly; "I believe that if you have conflicting style specifications, the value in the *last* listed class is predominant."

Actually, the order of the classes in the HTML doesn't make a difference. It's the order of the style sheet that matters. So whichever color you specify last for either of the two classes will be the one taken on by elements that are members of both classes.
"
So the intepretation of the following is different:
<div class="id8877 shoppingCartItem"></div>
<div class="shoppingCartItem id8877"></div>

Thus if both change the same property the last option allways wins?

Now if in the page in the following order I say:
1. item8877 {color:blue;}
2. <div class="item8877">blue</div>
3. item8877 {color:red;}
4. <div class="item8877">red</div>
The color written between the divs is what I would actually see. The entire document is not parse and only one style applied for the class item8877, instead the style is applied accoring to step 1 until step 3 happens and then every class item is displayed that way?

Thanks,

Jeff

"So the intepretation of the following is different:
<div class="id8877 shoppingCartItem"></div>
<div class="shoppingCartItem id8877"></div>"

No. DL-44 said it was different, I corrected him, saying it was not. Those two divs are equivalent.

"Now if in the page in the following order I say:
1. item8877 {color:blue;}
2. <div class="item8877">blue</div>
3. item8877 {color:red;}
4. <div class="item8877">red</div>"

You can't say that. Style sheets are only allowed in the HEAD of the document, and visual elements are only allowed in the BODY. I wouldn't be surprised if IE let you do that anyway, but you shouldn't, and there's no specification that details what happens in that case.

However, if your style sheet in the head contained the following:

.item8877 {color:blue;}
.item8877 {color:red;}

then any element with class="item8877" would have red text; the later CSS properties overrule the earlier ones.

"Style sheets are only allowed in the HEAD of the document, and visual elements are only allowed in the BODY."

So I cannot do the following mid page?
<body>
<style type="text/css">
.topNavBox {background-color: #ffffff;}
</style>
</body>

I have code like that running on some of our pages and both IE 5.1 up and Netscape 7 seem to be applying the styles.

If I am not supposed to do things like that how can I apply style changes within the body?

Maybe I am missing something here I figured it was better to have the style sheets broken up along the lines of the application code. A module will be called by the main page, the module will come with its own CSS code for styling and if needed the main page can apply a style that will over-ride the basic module style. Is it nessesary to manage all of my CSS code in one master file/location and do any CSS style changes within the actual tag of the module I want to change?

So if I had a <p> in a module and I wanted that one paragrah styled differently because the element contained matched word from a search request I would do this: <p background-color:#cc9900;> or would I have to have the different style defined within the head and I just call that class when I find a match? <p class=searchFound>

Thanks Again.

"So I cannot do the following mid page? <body><style... I have code like that running on some of our pages and both IE 5.1 up and Netscape 7 seem to be applying the styles."

Right. You should not be doing that. The browsers are merely being unnecessarily lenient.

"If I am not supposed to do things like that how can I apply style changes within the body?"

Style sheets should not be changing while the body of the document is parsed. By using classes and ids, along with thought-out selectors (such as #sidebar p {...} for paragraphs in one part of the page, and #content p {...} for paragraphs in another, etc), you have enough power to specify all of the styles for the page all at once.

"Is it nessesary to manage all of my CSS code in one master file/location and do any CSS style changes within the actual tag of the module I want to change?"

For standards-compliance, yes. All CSS must be either in the <head> or linked (from the head) with a <link> tag or an @import css rule. Importing files into a document which require CSS is a headache. In some circumstances, you can separately import the CSS that they need into the head of the document. Sometimes you do have to resort to the style="..." HTML attribute, although it's messy and discouraged.

"So if I had a <p> in a module and I wanted that one paragrah styled differently because the element contained matched word from a search request I would do this: <p background-color:#cc9900;> or would I have to have the different style defined within the head and I just call that class when I find a match? <p class=searchFound>"

The latter option is the best idea. Do things like that when possible.

I think you're really only going to get yourself more confused this way. Yo ureally need to start from scratch with the bascis of CSS.

Take some time to go through these
http://www.gurusnetwork.com/tutorials/css/cssintro/cssintro1.html
http://www.gurusnetwork.com/tutorials/css/cssintro2/cssintro2-1.html
http://www.gurusnetwork.com/tutorials/css/box_model/style.html
http://www.w3.org/Style/CSS/

And of course, I must add that the whole point to CSS is to seperate Style from Content.

The huge benefit of CSS is that you can control all of your stlye information from one or two external files, and therefore eliminate the need to pour through various pages of code to find where you've hard-coded styles and change them one by one.

Set the class, change the site-wide style whenever you feel like by altering one or two lines of code in one file.



[This message has been edited by DL-44 (edited 01-28-2003).]