Class or ID?

A lot of people come with the question “When do I use Class and when do I use IDs… what is the difference?”. This article talks about the differences and IDs can be used with other applications other than CSS.

The Difference

Both classes and IDs can be referenced with CSS using . and # respectively. However, IDs can only be used once per page, whereas classes can be used as many times as required.

“So why not always use classes?” — well because IDs are unique to that page they can be addressed in scripts, forms and CSS without the possibility of them being found anywhere else on the page.

IDs also have precedence over classes so classes can not be used to override id styled elements.

Application of IDs

Forms

The best example of the use of IDs uniquely used on a page, is within forms. An id on a input element is used to connect it to the <label> element.

<label for="id_name">Label Title</label>
<input type="text" name="parse_variable" id="id_name">

Because ids can only be used once per page, it is obvious that the label belongs only to the one <input> element.

Internal Linking

Ids make sense for elements that will only appear once on a page, such as navigation, footer and content containers. Because of this identification they can be referenced with interal links using the id name.

<a href="http://example.com/page.html#footer">To the footer</a>
<div id="footer"></div>

Scripting

Finally, IDs are an important part of the DOM, for accessing HTML elements and in client side scripting techniques such as Javascript.