Cascading style sheets use “id” or “class”

Question

when styling specific html elements, i tend to always use the class attribute. the css code looks cleaner imo.

why do both exist which one should you use and when ?<

Answer 1

ID's must be unique within a document. CLASS can be applied (and combined) to mutiple elements on the same page.

ID's cannot be combined (mutiple id's). This works:

<div class="beautiful blonde stupid"> blah blah blah </div>

but this does not work:

<div id="Paris Hilton"> blah blah blah </div>

Dynamic HTML typically uses id's to control elements. Elements with id's have the fastest 'lookup', as cletus mentions, when javascript is used in some way to have the page interact with the user.

Think of class and id in these contexts and the reasons for each become clear.

Imagine a page with a few functional divs. Every div would have the same class to display a common style (i.e. width). And every div needs a unique id to style it when it has been selected. In this situation, you might have something like this:

<div class="demo" id="div1" onlick="action()"> blah blah blah </div>

and a javascript routine somewhere like:

function action() 
{
  document.getElementById( 'div1' ).style.backgroundColor = 'red'
}

Note: This is dumb code but it is to get the point across

An element can be unique on each web page but be common to a web site. Thus it makes sense to use class in this context even if it is unique on the page.

So, a general rule of thumb - if it's unique, use id, if it's not use class. It's really easy to change id to class if needed. It's not as easy to switch back.

Answer 2

For CSS purposes, I share your habit of only using class. When JavaScript needs to touch elements, I'll give them ids as well, but I don't style on the id from my stylesheets.

My reasons for this are simple: It's always possible that, somewhere down the road, you might need another one. If you style it by class, you can just add a second element with that class and you're good to go. If you style it by id, then you need to either change the id to a class or (if there's any code referencing the id) split the id into both an id and a class and then figure out how to divide up the attributes and references between them. Much easier to just style it by class to start with.

I also prefer classes because you can assign more than one to the same element, which helps to avoid pointless repetition in the stylesheet, although this is a weak argument given that there's no reason you can't do some styling on id and other styling based on an arbitrary number of classes.

Answer 3

I use id if it's a single element, class if it applies to more than one

Answer 4

You go with in this order of preference:

1. ID (must be only one on the page);
2. Element and class (eg div.myclass); then
3. Class with no element qualifier.

ID is by far the fastest lookup. Next fastest is lookup by tagname. Slowest is by class name.

As for when to use classes or IDs, you use IDs when you can and classes when you can't.

Answer 5

If you want a simple answer:

just imagine that Class is like the family name, so you can assign it to several members of the family right? and each member should have a unique name so we can call them directly and that is Id.

• CLASS: you can assign it to several different groups of elements and you can easily change their style at once.

• ID: when you want to call one specific element you should use ID but notice that it MUST be unique

Answer 6

An ID is intended to be used once per page. I use an ID to designate main layout elements

<div id="mainForm">
<div id="wrapper">

A class can define styles across multiple elements. I use it to define the way that a certain type of element will appear on a page.

<p class="comments">
<div class="smallText">