What's the Difference Between an Id and a Class

What's the difference between an id and a class?

ids must be unique where as class can be applied to many things. In CSS, ids look like #elementID and class elements look like .someClass

In general, use id whenever you want to refer to a specific element and class when you have a number of things that are all alike. For instance, common id elements are things like header, footer, sidebar. Common class elements are things like highlight or external-link.

It's a good idea to read up on the cascade and understand the precedence assigned to various selectors: http://www.w3.org/TR/CSS2/cascade.html

The most basic precedence you should understand, however, is that id selectors take precedence over class selectors. If you had this:

<p id="intro" class="foo">Hello!</p>

and:

#intro { color: red }
.foo { color: blue }

The text would be red because the id selector takes precedence over the class selector.

Difference between ID and Class

First of all, w3schools is a terrible resource. It is badly written, cluttered, unfocused, and frequently misleading. You should use this much better set of resources at the Mozilla Developer Network instead (it sets out to achieve the same thing).

Your example doesn't use classes at all. You have CSS invoking an ID, and 2 HTML elements with that ID (which you shouldn't do — IDs are supposed to be unique!). The key difference between the 2:

1. IDs reference unique elements. There should only be 1 instance of any 1 ID. Classes can be applied to many elements and an element can have multiple classes
2. A CSS rule using an ID will override a CSS rule with a class if they both try to assign the same properties.
3. IDs are used for all sorts of native applications: anchor references, forms, iframes, whereas classes are used purely for styling with CSS.

I modified your code as an example of these points. Here's some of that code using classes for reference:

.paragraph {
    font-style: italic;
    color: green;
}

And the HTML:

<p id="para1" class="paragraph">Blah blah blah</p>

Difference between id and class

The biggest difference is that a document can have multiple elements with the same class, but not with the same ID. An Identifier must be specific to a certain element within a document (i.e. full HTML page).

When applying CSS styling, some experts have recommended using classes over IDs to avoid specificity wars. CSS Lint (http://csslint.net/) recommends this.

The reason is that stylesheets are read from top to bottom, but IDs take precedence over class. This means that:

#stockexchange-id { 
  color: blue;
}

.stockexchange-class {
  color: red;
}

Would color the text blue, even though red comes later. Here's a good graphic explaining specificity: https://stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg.

If everything has the same specificity, and most styles are applied via a single class, it makes the CSS easier to reason about, since it will read from top to bottom without extra styles being mixed in different orders. It also makes it easier to override classes, which can be useful.

Finally, if you style based on classes, you can re-use the styling on the same page by applying the class to another element on the page. With IDs, since they are unique, you cannot do this. Even if you think an element is unique on a page (e.g. a Buy Button), this may not always be the case. A designer may request the same element again later in the page.

What is the difference between id and class in CSS, and when should I use them?

For more info on this click here.

Example

<div id="header_id" class="header_class">Text</div>

#header_id {font-color:#fff}
.header_class {font-color:#000}

(Note that CSS uses the prefix # for IDs and . for Classes.)

However color was an HTML 4.01 <font> tag attribute deprecated in HTML 5.
In CSS there is no "font-color", the style is color so the above should read:

Example

<div id="header_id" class="header_class">Text</div>

#header_id {color:#fff}
.header_class {color:#000}

The text would be white.

What's the difference between class and id in jQuery?

ID's should be unique on the page, when you have multiple elements with same ID's, jQuery selects only the first one. That's because it doesn't have to bother looking for others as there isn't supposed to be any more – that might explain the weird behaviour you're experiencing.

If you want multiple elements to have the same functionality, give them the same class. If you want to identify a specific element, give it an id. This isn't limited to just jQuery, but to HTML and CSS overall.

What's the difference between CSS id selector and CSS class selector?

ID's are unique
Each element can have only one ID. Each page can have only one element with that ID
Classes are NOT unique
You can use the same class on multiple elements. You can use multiple classes on the same element.
More About

How to choose between `class` and `id`

Use id to identify elements that there will only be a single instance of on a page. For instance, if you have a single navigation bar that you are placing in a specific location, use id="navigation".

Use class to group elements that all behave a certain way. For instance, if you want your company name to appear in bold in body text, you might use <span class='company'>.

---

Related Topics