The differences between class and id in CSS

Whenever someone starts with CSS, they have the classic doubt about the differences between class and id, as the two have similar uses, in this post, I’m going to solve this doubt and explain the particularities and use cases of the two.

In CSS, there are three ways to style HTML elements

the element itself;
class;
id;

The element itself would call the element tag in CSS, class are selectors starting with a “.” and id are selectors starting with a “#”.

For example:

<!-- HTML -->
<div></div>
<div class="container"></div>
<div id="box"></div>

/* CSS */
div {
 background-color: red;
}
.container {
 background-color: green;
}
#box {
 background-color: blue;
}

This is the first difference, the way we have to refer to each of them in HTML one by class and one by id.

And the second call in CSS, class by “.” and id by “#”

On the more technical differences: we use classes when we are going to repeat the element several times on the page.

So we use the same class for each of these repetitions.

We can say then that a class will be used in elements that need to repeat many times on a page.

The id is exactly the opposite!

When the element will not repeat on the page, single element, it should preferably receive an id.

So we can’t have two identical ids on the same page

See the example:

<ul id="shop_list">
 <li class="item">Rice</li>
 <li class="item">Beans</li>
 <li class="item">Noodles</li>
 <li class="item">Meat</li>
</ul>

In this case, we will only have a shopping list on our page.

Then this list will receive the shopping_list id

And since we have several items in this list and we can also reuse them in another one, we use a class item to standardize the style of this element.

That way we also save CSS lines, declaring and styling them once

Remember:

An element can have only one id;
An id should not be used more than once on the same page;
And in the case of classes:
You can use the same class on multiple elements;
An element can have multiple classes;
Of course: an element can have an id and several classes;

Another important point is that the id is more specific than the class.

So if you put two styles, for example, of background-color on an element that has class and id.

The style of the id will override the class, cool right? 😀

obs: If you don’t need ids or classes don’t use them, use the element selector itself, the code is even simpler to understand because everyone already knows what an element <a> represents but not what the class or id of this element represents, then just debugging… 🙂