homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Difference between a class and an id
kenfused




msg:3242178
 6:58 am on Feb 4, 2007 (gmt 0)

I know this is a really dumb question but what is the difference between

<div id="leftcol">
<div class="rightbox">

when does one use "id" and "class"?

 

appi2




msg:3242188
 7:36 am on Feb 4, 2007 (gmt 0)

Use class when you want the style to apply to one or more elements.
eg
<h1 class"boldblue">Some text</h1>
<p class="boldblue">some text</p>

Use id when you want to apply the style to only one element.
An id has to be unique in name and only one "unique id" per page.

mep00




msg:3242197
 8:56 am on Feb 4, 2007 (gmt 0)

Besides that ids must be unique on a page and classes can be repeated, there are a few other differences of note.
  • Ids have a higher level of specificity
  • An element can have multiple classes assigned to it (e.g. <p class="title quote"></p> can be selected by both .title{} and .quote{})
  • Ids on a form element with an id can be the target of a label element by assigning the label's "for" attribute the form element's id
  • Id's can be the target of a uri's hash: <a href="example.com/page.html#there">target page will be scrolled to element with the id of "there"</a>
  • There's a DOM method "getElementById()", but there's no "getElementsByClass()" (unless you write it yourself)
  • In style sheets, ids are prepended with a hash("#") while classes are prepended with a period(".")

Robin_reala




msg:3242218
 10:07 am on Feb 4, 2007 (gmt 0)

A couple of small additions to the above two points:

1) Id suggest using classes & ids to describe what some is, not what it looks like. So instead of <h1 class="bluebold"> do something like <h1 class="sectionhead">. That way when the client comes back next week and says Id like my blue & bold headings to be pink & italic itll make debugging easier in the future.

2) Mozilla recently added a (non-w3-standard) native implementation of getElementsByClassName [bugzilla.mozilla.org] to Gecko on the back of WHATWGs forthcoming Web Applications 1.0 [whatwg.org] spec.

[edited by: Robin_reala at 10:11 am (utc) on Feb. 4, 2007]

mep00




msg:3242474
 8:15 pm on Feb 4, 2007 (gmt 0)

Mozilla recently added a (non-w3-standard) native implementation of getElementsByClassName to Gecko

Good to know, thanks. I didn't notice if it said when they will be releasing it; do you know? I wonder why it wasn't part of DOM2?

Robin_reala




msg:3242553
 10:02 pm on Feb 4, 2007 (gmt 0)

Well, its in current Firefox trunk builds if you want to experiment. First major release itll appear in is Firefox 3.0.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved