What is the difference between class and id in css? Where both are used? | Sololearn: Learn to code for FREE!
New course! Every coder should learn Generative AI!
Try a free lesson
+ 5

What is the difference between class and id in css? Where both are used?

19th Aug 2018, 7:18 AM
POONAM
POONAM - avatar
9 Answers
19th Aug 2018, 7:20 AM
Meet Mehta
Meet Mehta - avatar
+ 5
Id is unique and different for every element. Class="" can be used for many elements that you think you want to modify together. This way in CSS ID let you change the style of only one element, but using class="" allows you to change some elements at the same time.
19th Aug 2018, 7:21 AM
Ledio Deda
Ledio Deda - avatar
+ 4
Thnx Lεd10 Dεda for helping me to understand the difference
19th Aug 2018, 7:53 AM
POONAM
POONAM - avatar
+ 4
I have to correct myself. The answer of Led10 Deda is correct too. I understood his meaning wrong. Yes a third difference is that you can use only one id per element and classes can use more than one class on an element. 👍🏼👍🏼
19th Aug 2018, 5:07 PM
Sean
Sean - avatar
+ 4
Glad to hear that Sean 😂✌
19th Aug 2018, 5:11 PM
Ledio Deda
Ledio Deda - avatar
+ 3
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: ... class is used when we have to use CSS property in many locations within the same page or different.
19th Aug 2018, 9:13 AM
deepak sharma
deepak sharma - avatar
+ 3
POONAM The answer of Led10 Deda is not correct. You can use the ID for different objects too, same as a Class to define the CSS. If you use ten times the same ID and change the color in the CSS, it will change all object-colors. But there are two differences between IDs and Classes. The first answer starts correctly but ends wrong. IDs can be used as unique referenced in HTML (not for CSS). Its used for example if you want to navigate on the site without leaving it. Best examples are very long One-Page-Websites where you can scroll a lot. With IDs you can name sections of the page. If you use as navigation-link for example „index.html#footer“ the view automatically jumps to the footer-section if you named it „id=footer“. Very useable. The second difference is the significance of IDs and Classes. IDs have a higher significance as classes. If you for example add a id and a class to a p-tag and add a color to both, the text will have the color of the ID-tag. I made a example for you, that you can see the difference of significances. Have a look at the link. https://code.sololearn.com/WRpX31x1VRgC/?ref=app I hope you understand now the difference. Much fun! regards Sean
19th Aug 2018, 4:59 PM
Sean
Sean - avatar
+ 3
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. 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.
21st Aug 2018, 5:31 AM
Manish Kumar
Manish Kumar - avatar
+ 1
for example: lets assume in classroom with students with an id each who are from different countries. for example: US, Paris and India. similarly: classes are used for elements that have smiliar characteristics. id are unique and only one element can have an id. the other point is that an element that consists of a class can also have an id that is unique. Happy Coding
19th Aug 2018, 12:00 PM
Nuzzy Nuz
Nuzzy Nuz - avatar