10

I am learning HTML. Can someone please tell me what is the difference between class and id and when to use one over the other? They seem to do the same thing

<!DOCTYPE HTML>
<html>
<head>

<style>

#mycolor1 {color: red;}    
.mycolor2 {color: red;}

</style>

</head>
<body>

<div id="mycolor1">     hello world </div>
<div class="mycolor2">     hello world </div>

</body>
</html>
8
  • 3
    For such cursory questions, please search first - a little bit of prior knowledge will go a long way in writing a better question. Try something like "html id vs class" for starters. May 30, 2013 at 15:46
  • 2
    Duplicates here, here, here, and here (and likely more).
    – ajp15243
    May 30, 2013 at 15:47
  • 2
    @Jens It's not w3c schools, that site has nothing to do with W3C. Also take a look at w3fools.com May 30, 2013 at 15:50
  • 1
    This is clearly a duplicate question, there are 4 examples of the same question in the Linked section on the right hand side of this site.
    – Greg
    May 30, 2013 at 15:52

10 Answers 10

26

They do not do the same thing.id is used to target a specific element, classname can be used to target multiple elements.

Example:

<div id="mycolor1" class="mycolor2">     hello world </div>
<div class="mycolor2">     hello world2 </div>
<div class="mycolor2">     hello world3 </div>

Now, you can refer all the divs with classname mycolor2 at once using

.mycolor2{ color: red } //for example - in css

This would set all nodes with class mycolor2 to red.

However, if you want to set specifically mycolor1 to blue , you can target it specifically like this:

#mycolor1{ color: blue; }
13

Read the spec for the attributes and for CSS.

  • id must be unique. class does not have to be
  • id has higher (highest!) specificity in CSS
  • Elements can have multiple non-ordinal classes (separated by spaces), but only one id
  • It is faster to select an element by it's ID when querying the DOM
  • id can be used as an anchor target (using the fragment of the request) for any element. name only works with anchors (<a>)
4
  • Note that the name attribute on <a> elements is obselete.
    – ajp15243
    May 30, 2013 at 16:00
  • but what I am confused about, is when to use ID. I use class to style an element. The ID seems to be used only as anchor then? So if I have an element that I want to style red but not link to it, why should I use an ID to style an element? (you are talking about selecting an element. Selecting by whom? where?
    – steve h
    May 30, 2013 at 16:03
  • @steveh selecting by JavaScript or CSS. ID has higher specificity than class in both cases. ID identifies one element, but a class can identify many May 30, 2013 at 16:07
  • @steveh The id attribute has many uses, as this answer indicates. It is meant to identify a unique element on your page, and can then be used for numerous things, such as a styling selector, with a URI fragment (for instance, click a link under the Contents box on that Wikipedia page, and see the # placed in the URL and how it scrolls to that section, due to the browser finding a matching id), or as a way to quickly/easily/efficiently select that element in JavaScript for whatever JS functionality you may be writing.
    – ajp15243
    May 30, 2013 at 16:12
1

Classes should be used when you have multiple similar elements.

Ex: Many div's displaying song lyrics, you could assign them a class of lyrics since they are all similar.

ID's must be unique! They are used to target specific elements

Ex: An input for a users email could have the ID txtEmail -- No other element should have this ID.

0
1

The object itself will not change. The main difference between these 2 keyword is the use:

  • The ID is usually single in the page
  • The class can have one or many occurences

In the CSS or Javascript files:

  • The ID will be accessed by the character #
  • The class will be accessed by the character .
1

To put it simnply: id is unique to just one element in the whole HTML document, but class can be added to numerous elements.

Also, ID properties have priority over class properties.

ids and classes are especially useful if you plan on using javascript or any of its frameworks.

0

class is used when u want to set properties for a group of elements, but id can be set for only one element.

0

ID's must be unique (only be given to one element in the DOM at a time), whereas classes don't have to be. You've already discovered the CSS . class and # ID prefixes, so that's pretty much it.

0

ID provides a unique indentifier for the element, in case you want to manipulate it in JavaScript. The class attribute can be used to treat a group of HTML elements the same, particularly in regards to fonts, colors and other style properties...

0

ID is suitable for the elements which appears only once Like Logo sidebar container

And Class is suitable for the elements which has same UI but they can be appear more than once. Like

.feed in the #feeds Container

0
  • the Id selector is used when referring to a single unique element.
  • The Class selector referrers a group of elements.

For example, if you have a multiple buttons that look the same, you should use class="mybutton" to have consistent styling.

In terms of performance:

CSS selectors are matched from right to left.

Therefore, .myClass should be "faster" than #myID because it misses out testing.

The performance speed is negligible for normally sized pages and you will probably never notice a difference so it's mostly just about convention.

Here is more info on why css is browsers match css selectors from right to left

Not the answer you're looking for? Browse other questions tagged or ask your own question.