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

Question

#main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div id="main">
    Welcome
</div>

Here I gave an id to the div element and it's applying the relevant CSS for it.

OR

.main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div class="main">
    Welcome
</div>

Now here I gave a class to the div and it's also doing the same job for me.

Then what is the exact difference between Id and class and when should I use id and when should I use class.? I am a newbie in CSS and Web-design and a little bit confused while dealing with this.

Possible duplicate, http://stackoverflow.com/q/1215618/425313 — Brad Koch, May 02 '13 at 03:18
`Id` stands for identity (primary) and `class` is secondary. — KingRider, Aug 10 '16 at 11:22
This shouldn't have marked duplicate as author has asked "...when should I use them" ? Me learning web development confused which scenario should include class vs id ? — vikramvi, Jul 22 '20 at 04:56

lc. · Answer 1 · 2012-10-15T04:52:04.267

Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links.

Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect.

Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements (e.g. required or not, or defining the type of input format)

Examples of class names are: tag, comment, toolbar-button, warning-message, or email.
Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.

Examples of ids are: main-content, header, footer, or left-sidebar.

A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.

Suppose if I used like this `
` and use different CSS for it like `.main{//CSS}` and `.content{//CSS}` then what should be the final result? — J.K.A., Oct 15 '12 at 04:56
@kj7 Have a play http://jsfiddle.net/PcxQX/ - you should try not to use classes with *conflicting* styles though because it doesn't really make sense, right ("This element is both red and blue." or "This element is both bold and non-bold.")? — lc., Oct 15 '12 at 05:01
There's only one of me (id), but lots of people who are middle (class). I use an SSN number (#) to uniquely (id)entify me, while I'm a tiny part (.) of a social (class). — Pete855217, Aug 13 '16 at 13:54
This should have been accepted answer; as it clearly mentions when to use class vs id. — vikramvi, Jul 22 '20 at 04:58

score 73 · Answer 2 · edited Dec 30 '15 at 11:47

ids 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.

Javascript cares

JavaScript people are already probably more in tune with the differences between classes and ids. JavaScript depends on there being only one page element with any particular id, or else the commonly used getElementById function couldn't be depended on.

score 13 · Accepted Answer · edited Apr 06 '16 at 13:27

13

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.

edited Apr 06 '16 at 13:27

Dave Everitt

17,193
6
67
97

answered Oct 15 '12 at 04:42

Rohit Azad Malik

31,410
17
69
97

82

Downvoted because the helpful part of the original version of this answer was [stolen](http://stackoverflow.com/a/84416) and the current version doesn't answer the question. This answer should be deleted. – jcsahnwaldt Reinstate Monica Sep 02 '16 at 23:36
4

The "helpful" part for me was "(Note that CSS uses the prefix `#` for IDs and `.` for Classes.)", which I don't see in the linked answer. – rsethc Jul 17 '17 at 04:42

score 10 · Answer 4 · answered Oct 15 '12 at 04:40

IDs must be unique--you can't have more than one element with the same ID in an html document. Classes can be used for multiple elements. In this case, you would want to use an ID for "main" because it's (presumably) unique--it's the "main" div that serves as a container for your other content and there will only be one.

If you have a bunch of menu buttons or some other element for which you want the styling repeated, you would assign them all to the same class and then style that class.

score 5 · Answer 5 · edited Mar 28 '19 at 21:03

As pretty much everyone else has said use ID for one-off elements and class for multiple use elements.

Here is a quick, over simplified example, take HTML and HEAD tags as read

<body>
    <div id="leftCol">
        You will only have one left column
    </div>
    <div id="mainContent">
        Only one main content container, but.....
        <p class="prettyPara">You might want more than one pretty paragraph</p>
        <p>This one is boring and unstyled</p>
        <p class="prettyPara">See I told you, you might need another!</p>
    </div>
    <div id="footer">
        Not very HTML5 but you'll likely only have one of these too.
    </div>
</body>

Also, as mentioned in other answers ID are well exposed to javascript, classes less so. However modern javascript frameworks like jQuery leverage class for javascript too

score 4 · Answer 6 · answered Jul 08 '14 at 17:22

ID's have the functionality to work as links to particular sections within a webpage. a keyword after # tag will take you to a particular section of the webpage. e.g "http://exampleurl.com#chapter5" in the address bar will take you there when you have a "section5" id wrapped around the chapter 5 section of the page.

score 2 · Answer 7 · answered Oct 15 '12 at 04:40

2

The class attribute can be used with multiple HTML elements/tags and all will take the effect. Where as the id is meant for a single element/tag and is considered unique.

Moreoever the id has a higher specificity value than the class.

answered Oct 15 '12 at 04:40

M. Ahmad Zafar

4,881
4
32
44

score 2 · Answer 8 · answered Oct 15 '12 at 04:43

id:

It will identify the unique element of your entire page. No other element should be declared with the same id. The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#".

class:

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."

score 2 · Answer 9 · answered Aug 10 '16 at 11:06

If there is something to add to the previous good answers, it is to explain why ids must be unique per page. This is important to understand for a beginner because applying the same id to multiple elements within the same page will not trigger any error and rather has the same effects as a class.

So from an HTML/CSS perspective, the uniqueness of id per page does not make a sens. But from the JavaScript perspective, it is important to have one id per element per page because getElementById() identifies, as its name suggests, elements by their ids.

So even if you are a pure HTML/CSS developer, you must respect the uniqueness aspect of ids per page for two good reasons:

Clarity: whenever you see an id you are sure it does not exist elsewhere within the same page
Scalability: Even if you are developing only in HTML/CSS, you need to take in consideration the day where you or an other developer will move on to maintain and add functionality to your website in JavaScript.

score 1 · Answer 10 · answered Oct 15 '12 at 04:40

You can assign a class to many elements. You can also assign more than one class to an element, eg.

<button class="btn span4" ..>

in Bootstrap. You can assign the id only to one. So if you want to make many elements look the same, eg. list items, you choose class. If you want to trigger certain actions on an element using JavaScript you will probably use id.

score 1 · Answer 11 · answered Oct 15 '12 at 04:41

A class can be used several times, while an ID can only be used once, so you should use classes for items that you know you're going to use a lot. An example would be if you wanted to give all the paragraphs on your webpage the same styling, you would use classes.

Standards specify that any given ID name can only be referenced once within a page or document. Use IDs when there is only one occurence per page. Use classes when there are one or more occurences per page.

score 1 · Answer 12 · answered Oct 15 '12 at 04:44

This is very simple to understand :-

id is used when we have to apply CSS property to one attribute only.

class is used when we have to use CSS property in many locations within the same page or different.

General :- for unique structure like staring div and buttons layout we use id .

for same CSS throughout the page or project we use class

id is light and class is little heavy

score 1 · Answer 13 · answered Oct 15 '12 at 04:51

A simple way to look at it is that an id is unique to only one element.

A class is not unique and applied to multiple elements.

For example:

<p class = "content">This is some random <strong id="veryImportant"> stuff!</strong></p>

Content is a class since it'll probably apply to some other tags aswell where as "veryImportant" is only being used once and never again.

score -2 · Answer 14 · edited Oct 03 '15 at 06:16

-2

Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.

The class selector uses the HTML class attribute, and is defined with a "."
A simple way to look at it is that an id is unique to only one element. class is better to use as it will help you to execute what ever you want.

edited Oct 03 '15 at 06:16

Jérémie Bertrand

3,025
3
44
53

answered Oct 03 '15 at 05:06

Aakriti Mehra

1

score -4 · Answer 15 · edited Dec 22 '15 at 23:12

-4

id selector can be used to more elements. here is the example:

css:

#t_color{
    color: red;
}
#f_style{
    font-family: arial;
    font-size: 20px;
}

html:

<p id="t_color"> test only </p>
<div id="t_color">the box text</div>

I tested on internet explorer (ver. 11.0) and Chrome (ver.47.0). it works on both of them.

The "unique" only means one element can not have more than one id attributes like class selector. Neither

<p id="t_color f_style">...</p>

nor

<p id="t_color" id="f_style">...</p>

edited Dec 22 '15 at 23:12

McVenco

1,011
1
17
30

answered Dec 22 '15 at 22:22

xiaofeng

15

3

No, "unique" means you can NOT use the same ID on multiple elements. Your example where the `p` and `div` elements both have the same ID is wrong. – McVenco Dec 22 '15 at 22:49
1

This may be possible, but it is very bad practice and not the industry standard. – David Oct 15 '16 at 16:49

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

15 Answers15

Linked

Related