FRIHOST • FORUMS • SEARCH • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

In CSS what's the difference between class and ID

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Possum
Hi

When you are incorporating CSS into your document is there a reason why you should use a class or a ID..

They sort of seem the same to be..

Thank you..
rickylau
The difference is... the attributes you have to specify for your HTML tags are different Laughing

OK, it's one of the differences. As you may notice

CSS class selectors (.myClassName) will apply to HTML tags with class attribute containing specified class name (in this case <xxx class="myClassName">)
CSS id selectors (#myId) will apply to HTML tag which id is specified ID (this time <xxx id="myId">)

There is another difference. You may notice at what I said just before, while I mentioned
Quote:
CSS class selectors...will apply to HTML tags with class attribute containing specified class name
I mentioned this for id selectors
Quote:
CSS id selectors...will apply to HTML tag which id is specified ID

What this means is you can have multiple class name in one HTML tag, separated by space (e.g. <div class="odd information">). This div tag will be applicable to CSS selectors .odd and .information, but you can only have one ID in one HTML tag (what I believe is that).

One more difference I know is that (more likely to be HTML stuff here), if you have few HTML elements with same ID, your file cannot pass W3C's standard HTML validator.

So I will use id selector if I know there will only one element is applicable in one file and class selector if there are few elements using same CSS rule there is a need to apply few CSS rules.
sonam
The ID have higher rank then class and like rickylau wrote you can use only one per page if you want valid xhtml. In other hand you can use class as many times you want on one page. I am using ID for main page structure and class for combinations between other elements. For example:

Code:
#test{
color:#000000;
font-weight:bold;
}
.change{
color:#dd00cc;
}

<div id="test"><p>SOMETHING</p></div>
<div id="test"><p class="change">SOMETHING</p></div>


Sonam
Possum
Thx

I was a little worried I might have asked a stupid question. Your answers have steered me in the right direction..

Cheers
rickylau
Possum wrote:
I was a little worried I might have asked a stupid question.
No you've asked a good question. I don't know that
sonam wrote:
The ID have higher rank then class
too. We are both learning from others Wink .
rockacola
The important difference on top of my head:

- ID ranks higher than class. eg/ <div id="change-to-blue" class="change-to-red"> it'll change to blue.
- ID SHOULD BE unique within the page. Not so much a CSS issue.
- element can have multiple classes but only 1 ID. eg/ <div id="alpha" class="blue bold italic">
- A class name can be reused through out various of elements.

Wink
Stubru Freak
What you're supposed to do is interpret it literally. ID's are supported in CSS so that when you want to target one specific element (like THE header or THE navigation) you can just assign some CSS to its ID. If you want to target a group of elements (like all important paragraphs, all external links, all in-text images, ...) you can define a class name for them and address them that way.
Related topics

Is there a difference between "I know" and "I
What is the difference between these?
Difference between <div> and <p>...?
D difference between Anime and Tokusatsu... anyone know??
Difference between a Jr. Admin & MOD
Difference between watch & wife.
Difference between Contests and Marketplace.
Whats the difference between Core Duo and Hyperthreading?
what is the difference between primary partition?
What is the Difference Between Love and Affection
difference between windows xp service pack and sp 2 rc 1
difference between Pentium D, Pentium 4 and AMD Athlon
Diff: Windows 2000 Vs Windows server 2003
Actionscript2.0 - Difference between var :Object and new Obj
Difference between asian and hollywood movies
Difference between IXUS & IXY 800IS
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.