ID VS class

[morningdew]

I hope this question is not too basic to post in this forum

 

I am wondering when should I use ID over class and vice versa?

 

I understand that ID is more suitable for an element that occurs only once in one page whereas class can be use multiple times.

 

However, it appears to me that some web designers use them rather loosely. I found some web use class instead of ID when I thought ID is more suitable and vice versa.

 

It certainly is possible that wesites/webpages I observed might not follow CSS best practices. But, I wonder what are the consequences of not using ID and class appropriately?

[Andrea]

ID can only be used ONCE per page, class can be used as often as you like. ID presents itself to be used for example for

 

<div id="header"> or <div id="footer">, whereas class would be used for example for

 

<h3 class="special"> --- as you might have more than one h3 on any given page.

[falkencreative]

I think this comes down to the coder's personal coding style -- there isn't necessarily a "right" or "wrong" way to go about it, assuming you aren't doing anything illegal like repeating an id multiple times in a page.

 

My personal style is to use ids on major important sections of the page, such as #header, #nav, #footer, etc. and then use classes within those sections as necessary. I may also use an id if I'm using javascript/jquery to change an element on the page using getElementByID (http://www.tizag.com/javascriptT/javascript-getelementbyid.php).

[morningdew]

ID can only be used ONCE per page, class can be used as often as you like. ID presents itself to be used for example for

 

<div id="header"> or <div id="footer">, whereas class would be used for example for

 

<h3 class="special"> --- as you might have more than one h3 on any given page.

 

Thank you

[morningdew]

...assuming you aren't doing anything illegal like repeating an id multiple times in a page.

 

Hi falkencreative, when you said it's illegal to repeat an ID multiple times in a page, are you referring to generally accepted web standards or law?

[falkencreative]

Hi falkencreative, when you said it's illegal to repeat an ID multiple times in a page, are you referring to generally accepted web standards or law?

I believe it's part of the HTML specifications. If you do repeat ids multiple times on a page, you'll run into issues: your site won't pass validation, may have styling/cross browser issues and potentially Javascript issues as well (if you are selecting an element on the page by id).

[morningdew]

Thank you very much for your explanation. I really appreciate it.

[LSW]

By using ID, you also have a basis for programming. You can insert data into the same ID you chose for CSS. If you use more than in ID, that botches such things up as it does not know which one you mean.

 

I thought I had written on that subject, does anyone remember or have a link to it in the old forums?

 

Consider it this way:

In the old way you had to format ever line or section of content in HTML. CSS was meant to stop that. But using classes is sort of the same thing.

 

Using an ID eliminates that.

 

Rather than use a class, you can call the order needed. ID header H3 is to be red, ID Footer h3 is to be blue. This way you need not create 3 H3 classes. If the H3 is in a container with this id it is this color, if the H3 is found in another container it will be shown a different way.

 

My web sites have no more than 3 class tags because I use only ID's and define tags found within that ID.

[morningdew]

Hi Kyle thank you very much for your input. I really appreciate it.