Jump to content

  • Free consultations and support
  • Live chatClick Here for Live Chat
  • Call ico 1888-906-1888
    Phone support: Open

    Ready for your call :)

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams

    Phone support: Closed

    We are back in: 1h 20m

    Our business hours:

    Mon — Fri, 2am — 8pm (EST)

    US & EU support teams


Difference between ID and Class in CSS

css difference id and class

  • Please log in to reply
&nsbp;

#1 SmartWeb

SmartWeb

    Senior Member

  • Designer
  • 271 posts

Posted 11 August 2012 - 01:36 PM

The difference between ID and Class in CSS

ID and Class are often confusing for beginners. A class in CSS, is represented by a dot ‘.’ and ID is represented by a hash ‘#’. In a nutshell the id is used on a unique style and it doesn’t repeat itself, but the class in CSS, can be re-used.
  • lalelemu likes this

#2 santossystems

santossystems

    Junior Member

  • Designer
  • 14 posts

Posted 14 September 2012 - 06:01 PM

ID in general or at least don't know any language or application that consider it to be non-unique. However, it must be noted that the uniqueness of an ID is only within the scope of the same page.
  • lalelemu likes this

#3 DesktopDesigns

DesktopDesigns

    Banned

  • Banned
  • 31 posts

Posted 15 September 2012 - 05:48 AM

A lot of web designers new to the field aren't aware of the differences between ID's and classes. So here's a fairly brief article outlining proper and improper uses of the two.
ID's and What They're Used For

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. Duplicate ID tags will cause your page to fail validation, and can have negative effects when using JavaScript with them. Simply put, an ID is like the sticker that says "you are here" on a mall directory, and there can only ever be one of those.

Browsers use fragment identifiers as well. If you want to place a link at the top of your page that will scroll the browser down to the content when clicked, simply add id="content" to the content element or header above your content and use the following anchor:

<a href="#content">Go to the content</a>

Naturally, CSS can select ID's to apply individual styles to them using the hash sign (#), but JavaScript relies on ID's quite a bit as well. The getElementById() function is very important in most scripts.
Classes

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. This separation of content from presentation is what makes sites powered by CSS more robust, but some don't know the full extent to which they can use classes. Classes can not only be used more than once, but more than one can be used on an element:

.left {
float: left;
}
.larger p {
font-size: 125%;
}

<div class="left larger">
<p>A tiny bit of content.</p>
</div>

The second piece of code is perfectly valid HTML, it demonstrates a div using two separate classes. This technique can reduce your CSS style sheet considerably when used effectively. It's also worth noting that you can use both ID's and classes on the same HTML element.
  • lalelemu likes this

#4 anirban09p

anirban09p

    Junior Member

  • Designer
  • 26 posts

Posted 24 June 2015 - 04:31 AM

What Difference between ID and Class in CSS ?
  • lalelemu likes this

#5 RajGawdi

RajGawdi

    Member

  • Designer
  • 73 posts

Posted 27 July 2017 - 07:10 AM

What Difference between ID and Class in CSS ?

Both are used for same purpose in CSS and difference between both is:

ID's are unique but Classes are NOT unique that means each element can have only one ID whereas the same class can be used on multiple elements.
 
ID is defined as 
 
#para1 {
    text-align: center;
    color: red;
}
 
where #para1 is HTML element with ID
 
Classes are designed as
 
HTML:
 
<div class="widget"></div>
<div class="widget"></div>
 
CSS
 
.widget {
    text-align: center;
    color: red;
}
 
 
Thanks
Raj Gawdi
TheWebDesign

  • lalelemu likes this

#6 Rabindrajha

Rabindrajha

    Junior Member

  • Designer
  • 2 posts

Posted 05 December 2017 - 06:52 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 sameclass. The class selector uses the HTML class attribute, and is defined with a "." idis used when we have to apply CSS property to one attribute only.



#7 Rabindrajha

Rabindrajha

    Junior Member

  • Designer
  • 2 posts

Posted 05 December 2017 - 06:53 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 sameclass. The class selector uses the HTML class attribute, and is defined with a "." idis used when we have to apply CSS property to one attribute only.



#8 RajGawdi

RajGawdi

    Member

  • Designer
  • 73 posts

Posted 05 December 2017 - 09:10 AM

ID’s are “Unique”:
 
Only one ID can be set for each Element.
ID should only be used ones within a page.
You should used ID when you have a single element on the page that you want to manipulate.
 
Example:
<div id=”main-header”>text</div>
Classes aren’t unique:
 
The same classes can be set for multiple elements.
More than one Class can be used for the same element.
You should use Class when you want to manipulate multiple elements in the same page or site. Class will help you to save time by manipulate all the elements in one time.
 
Example:
<div class=”column”>text</div>


#9 spidergems

spidergems

    Junior Member

  • Designer
  • 7 posts

Posted 24 April 2018 - 06:18 AM

Most of the members responded here failed to answer the unique benefits of ID or class.

 

ID and class can be used to select HTML elements and use them in CSS or JS. 

When it comes to the difference, one ID can only be used once in an HTML document. Actually, this doesn't prove how ID is different from class. We can use class instead ID to do styling and for JS.

 

However, ID has some unique uses. 

 

Unique Uses of ID

 

  • ID can be used in links to jump to particular points in a web page. You might have seen in Wikipedia when you click reference number above words in the article, you will be taken to the resources section. This effect can be achieved using ID.

 

  • You might have also seen single-page websites using ID this way. When you click the contact on the menu, you will be automatically taken to contact section beneath the web page. 

 

This is the unique benefit of ID. We can't do this with class.

 

If you didn't understand this, I can show you with some examples. Please don't hesitate to ask. 



#10 Karmaseo

Karmaseo

    Junior Member

  • Client
  • 4 posts

Posted 29 August 2018 - 01:16 PM

In CSS "class" is represented by dot (.) and "id" is represented by hash (#) however the major difference is class be used multiple times while id can be used only on unique styling.







Also tagged with one or more of these keywords: css, difference, id and class

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users