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

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

Answer 2

I mostly use ID to identify specific elements within elements already having a class assigned. That way I can identify easier what element gets which styling.

Not really sure if there is a real other difference between them, other than that you can only use an ID once in a page...

Answer 3

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">

Answer 4

The id attribute is only to be used once within each document. The difference is that you then have a unique id for a specific element within the document, which is handy when scripting, or in fact even for CSS when you need to style specifically only one element.

Class is more of a "type" delineation. You can specify that an element should have one or more classes, which describe properties about it.

For instance:

<div id="header" />

You only have one header on a given document.

<div class="item alternate last" />

You have multiple items, and this item is one of the alternate items. It is also the last item. You could even give it the id "last" if you know for sure that there is always only one last item in the document.

Etc.

Answer 5

ids identify elements. classes classify elements.

Put a class on an element if "it's a kind of ..." (e.g. address)

Put an ID on an element if "it is the ..." (e.g. navigation)

Answer 6

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 7

Read the description of the id and class attribute in the HTML 4.01 specification.

Answer 8

ids

#header
#footer
#sidebar
#menu
#content

classes

.important
.warning
.validationError
.recent
.outOfDate
.inactive
.weekDay
.previous
.next
.first
.last

Answer 9

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 10

There are many ways of selecting a style. You can use id's, classes and tags, and you can combine them:

#nav - applies to the element with id="nav"

#nav div - applies to any div element inside the element with id="nav"

#nav .left - applies to any element with class="left" inside the element with id="nav"

.item span - applies to any span element inside the element with class="item"

.item .address - applies to any element with class="address" inside the element with class="item"

div.item - applies to any div element with class="item"

#nav div span - applies to any span element inside a div element inside the element with id="nav"

Important for css selectors is how specific they are. An id is more specific than a class. With this style:

.dark { color: black; }
#bright { color: white; }

This element would get white text, as the style using the id is more specific than the style using the class:

<div id="bright" class="dark">Hello world</div>

There is even more to know about selectors and specificity. I have found this tutorial to be a good overview of selectors: Selectutorial

Answer 11

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 12

As far a HTML is concerned, an id identifies a single element in the DOM and each element can only have one unique id, whereas a class classifies one or many elements in the DOM and each element can have multiple classes.

<div id="this-unique-element" class="class1 class2 class3">...</div>

Also from a CSS perspective, remember that the order of importance goes from least specific to most specific. So, #id properties override .class properties, which in turn override tag properties. Therefore, #id styles trump .class styles unless certain class properties are flagged !important.

<style>
 #red1, #red2 { color: red; }
 .blue1 { color: blue; }
 .blue2 { color: blue !important; }
</style>

<p id="red1" class="blue1">This text is red.</p>
<p id="red2" class="blue2">This text is blue.</p>

Answer 13

Where to use an ID versus a class

The simple difference between the two is that while a class can be used repeatedly on a page, an ID must only be used once per page. Therefore, it is appropriate to use an ID on the div element that is marking up the main content on the page, as there will only be one main content section. In contrast, you must use a class to set up alternating row colors on a table, as they are by definition going to be used more than once.

IDs are an incredibly powerful tool. An element with an ID can be the target of a piece of JavaScript that manipulates the element or its contents in some way. The ID attribute can be used as the target of an internal link, replacing anchor tags with name attributes. Finally, if you make your IDs clear and logical, they can serve as a sort of “self documentation” within the document. For example, you do not necessarily need to add a comment before a block stating that a block of code will contain the main content if the opening tag of the block has an ID of, say, "main", "header", "footer", etc.