Whats the difference between using .Class or #ElementId in CSS?

Question

Ive been wondering... in CSS are there any differences between creating a style class and applying it an element, or creating a style with the #elementId notation (apart from being able to assign a class to different elements)?

For example...

#div1
{
 background-color: Yellow;
}

<div id="div1">
    Hello world!
</div>

Or

.div1
{
 background-color: Yellow;
}

<div class="div1">
    Hello world!
</div>

Thanks! :)

Answer 1

Many classes can include a given "class" while only one element may be identified by a given ID. If you need to locate an unique Element use ID, otherwise if you wish to mark many elements that are basically the same but in different spots in your html use 'class'.

You sort of answered your own question, they are just mechanisms to 'identify' elements.

Answer 2

An ID must be unique in a document. Classes can be used in any number and combination. So you can use one class on multiple elements and multiple classes on one element.

Answer 3

using #elementID applies only to the element uniquely identified by that id. a class can be used by multiple elements

there is however an order of precedence. selectors using the id have greater weight than selectors using class and when there is a collision the #id selector will take precedence

edit: see http://kiribao.blogspot.com/2008/03/css-selectors-precedence-and-ways-to.html for more detail on selector precedence

edit: also see the w3c specs at http://www.w3.org/TR/CSS21/cascade.html#specificity

Answer 4

Performance or functionality-wise, there is no difference [citation needed].

The only real difference is semantic, if you are working on a single node with a unique ID, or if you need a reusable class marking several nodes.

Answer 5

One other difference; id-selectors are more specific than class-selectors, so I believe they will "trump" any other selector that exists. You can use "important" to do the same thing, but and id selector may be easier.

But id-selectors should be used sparingly...

Answer 6

Classes are to group together elements which share similar functionality (for scripting) and/or layout (for styling). IDs should always be unique identifiers for elements.

A good example for something which should have an ID is the content area of your document, which is common to use the #content ID for. Classes are good for anything else which may occur twice in your document, such as headers which should have special markup or behavior, or links which should open a lightbox instead of the normal "go to URL" behavior.

HTH.

Answer 7

There are some differences:

Uniqueness

IDs must be unique, classes can be repeated. This is logical if you look at their expected usage.

Usage

IDs should be used to denote large sections of a website (e.g. #header), or unique elements that are accessed via Javascript (e.g. #killSession)

Classes should be used for reusable parts.

Specifity

IDs get assigned a specifity value of 100, while classes are only worth 1.

So this rule:

#id .class

Is worth 101 points.

This rule:

#id #id2

Is worth 200 points and will always trump the #id .class rule (regardless of the source order).

Performance

Performance wise, getting elements by ID is always faster than class, especially when talking Javascript. I'd love to see someone add some cold hard numbers to this.

Discussion

• An interesting discussion about the performance of selectors can be found at Shaun Inman's blog.
• The usage of classes is debated in Jeff Croft Applying OOP concepts to CSS