What is the difference between id and class?

Enter a reason for deleting this comment

What is the difference between id and class?

In CSS (Cascading Style Sheets) you can use both "id" and "class" to select elements to style. For example, you can use:

<div id="test">Text</div>

and use "#test" on your css page to style the text in between the "div" tags. My questions is what is the different between "id" and "class"? Surely I can replace the above "id" with "class", ie.
<div class="test">Text</div>

and use ".test" on your css page and it will provide the same results.

When do you use the "id" and "class" and what is the difference between the two?



Please login or sign up to leave a comment


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.

In Simple Word:

A class is a type of item and the id is the unique name of an item on the page.

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


Are you sure you want to delete this post?


Here's how I remember it. Class is meant to design several elements. And id is used for unique elements which appear specifically in some points. You may find that reusing id elements often lead to issues when you wish to recurring use them. If you are planning to use them recurring then go with the class. That's how you can have the uniform and non breaking design with CSS.

Are you sure you want to delete this post?