Difference between class and id in css ?

**thaonvp** · 27-04-2015, 04:33 AM

View more threads in the same category:

**arsalan1101** · 27-04-2015, 12:16 PM

ID selector is used to unique and you can't reuse id but class is used for multiple elements i-e more then 1 <p> tags can be of same class ..

**eli_jay** · 28-04-2015, 01:33 AM

ID is higher priority in CSS. But you should use them as the name meaning. Use ID if you want to call one element and use class if you want to call all elements of that class

**yasar** · 11-05-2015, 03:41 PM

Div
<!DOCTYPE html>
<html>
<head>
<style>
#center
{
text-align:center;
}
</style>
</head>

<body>
<h1 id="center">Center-aligned heading</h1>
<p id="center">Center-aligned paragraph.</p>
</body>
</html>

Class

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

**anirban09p** · 19-05-2015, 04:11 AM

Yup, classes can be applied to multiple elements on a single page, whereas ID's can only be used once on any given page.

ID's are also used to allow JS to identify a certain element. For example, if you want to grab an element with a certain ID and perform some sort of action on that element, you use JS to identify it like so:

**daviddakarai** · 17-06-2015, 11:23 AM

For detail notes about difference between in class & id in CSS- https://css-tricks.com/the-differenc...-id-and-class/

**MrJaswal** · 23-06-2015, 11:59 AM

Originally Posted by thaonvp

Difference between class and id in css ?

Class is used when we have to use CSS property in many locations and id You can assign a class to many elements.

**Mahisha** · 08-03-2016, 07:26 AM

I'm fresher in the designing. So thats why i am confusing to work with id and classes in CSS.

**gisteam** · 29-03-2016, 07:07 AM

ID, short for fragment identifier, is a beautiful attribute, but it's very easy to use them improperly. You can only use an ID name once in any XHTML or HTML document.

Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document.

**Business Aura** · 01-06-2016, 07:20 AM

Originally Posted by yasar

Div
<!DOCTYPE html>
<html>
<head>
<style>
#center
{
text-align:center;
}
</style>
</head>

<body>
<h1 id="center">Center-aligned heading</h1>
<p id="center">Center-aligned paragraph.</p>
</body>
</html>

Class

<!DOCTYPE html>
<html>
<head>
<style>
.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">Center-aligned heading</h1>
<p class="center">Center-aligned paragraph.</p>
</body>
</html>

Thanks For Sharing the Information.

**sudhakar** · 03-10-2016, 11:39 AM

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

**seo1** · 06-10-2016, 07:39 AM

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.

**davidstephan** · 18-10-2016, 12:59 PM

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.

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.

To know more visit- https://css-tricks.com/the-differenc...-id-and-class/

**barbara glowam** · 01-12-2016, 11:21 AM

Class is used 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. 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. Examples of ids are: main-content, header, footer, or left-sidebar.

**davidstephan** · 05-12-2016, 01:23 PM

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

**saadtaimoor** · 06-12-2016, 08:54 AM

ID's are unique

Each element can have only one ID, and each page can have only one element with that ID

When I was first learning this stuff, I heard over and over that you should only use ID's once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good "rule of thumb" to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don't seem to do anything different.

Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one.

Classes are NOT unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.
Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple "widgets":

<div class="widget"></div>
<div class="widget"></div>
<div class="widget"></div>

You can now use the class name "widget" as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than the other, but still share all the other attributes? Classes has you covered there, as you can apply more than one class:

<div class="widget"></div>
<div class="widget big"></div>
<div class="widget"></div>

No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it's more like thousands, but way more than you'll ever need).

**jackar56** · 07-03-2017, 11:47 AM

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.

**Amit Tiwari** · 08-03-2017, 12:25 PM

classes can be applied to multiple elements on a single page, whereas ID's can only be used once on any given page.

**3dtech** · 18-04-2017, 11:58 AM

ID's are also used to allow JS to identify a certain element. For example, if you want to grab an element with a certain ID and perform some sort of action on that element

**SidharthNarayan** · 02-06-2017, 11:02 AM

class selector is most often used on several elements.
Css is used to design our website

Magento Expert Forum - Improve your Magento experience

Difference between class and id in css ?

Thread Tools

Difference between class and id in css ?

View more threads in the same category:

The Following User Says Thank You to saadtaimoor For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions