JWS Docs / CSS Intro / .class vs #id

When to use a .class or #id

We're often asked the questions "Should I be using a .class or an #id in my CSS?" or "Does it matter which I use and when I use it in my HTML page?".

Well in short yes it does as even though they are both used as CSS selectors they are used and written a little differently within your stylesheet. But also as HTML attributes their use is very different within the HTML page too. So now we've probably confused you a little further lets explain how each one is used and written.

Adding them to your element

To start with id's and classes are both attributes that can be added to any element on a HTML page, they are then used within your CSS to select those particular elements and add whatever new styling you want to it, but they serve different purposes and have distinct characteristics.

The main differences between them are:

.class

Identified: .classes are always selected and written with a . (full stop or period) symbol before the name you give it.

Reusability: .classes can be used on as many elements of a HTML page as you want, which makes them great for applying the same styling to several elements.

Versatility: You can also add multiple .classes on a single element, so they offer more versatility in styling compared to #id's.

Use case: Classes are typically used for styling groups of elements that share the same styles.

#id

Identified: #id's are always selected and written with a # (hash) symbol before the name you give it.

Uniqueness: An #id is meant to be unique in that there can be only one id per element and also only one id of that name within each page. Each #id should be used only once.

Specificity: #id's have higher specificity than .classes. This means if you have a style conflict between an #id and a .class, the #id will take precedence.

Use case: #id's are often used for elements that need to be identified uniquely for JavaScript interactions or for anchor links, thought they can also be used as a CSS selector if you need to apply specific styling to an element.

It's all in the name

To be able to select either a .class or #id you need to give them a name when you add them to an element ="name_here". Now this can be anything you want it to be (within reason) though as a general rule it's best to use something that is relevant and will make sense to future you in case you ever need to come back and make updates to your code. e.g. a class to make font smaller could be called class="small-font"

<div>
<h4>Colour Changing Elements</h4>
<p class="colour-change"> This paragraph is highlighted with a different colour using a .class.</p>
<p>While this paragraph stay's the same as the rest of the page.</p>
<p class="colour-change small-font"> This paragraph is also highlighted using the same class.</p>
<p id="different-colour"> This last paragraph is a different colour using a #id.</p>
</div>

Colour Changing Elements

This paragraph is highlighted with a different colour using a class.

While this paragraph stay's the same as the rest of the page.

This paragraph is also highlighted using the same class.

This last paragraph is a different colour using a #id.

.colour-change {
    color: midnightblue; 
}
/* A class is written with a . in front of your chosen name */

#different-colour {
    color: darkmagenta; 
}
/* An id is written with a # in front of your chosen name */

.small-font {
    font: 1rem;
}
/* This second class can be added to the same element as the first */

#id's more than just a CSS selector

Within the browser .classes have no special abilities, unlike #id’s that have the “hash value”.

When we add an #id_name to a URL the browser will attempt to locate the element with the same <div id="#id_name">, automatically scrolling the page to that particular element. This can be used within your website to take a user to a particular section on another page or as an in page navigation/jump to. Which is why #id's must be unique or else the browser won't know where in a page to scroll to.

Which to use when

Its good practice to follow the less is more rule when styling your HTML elements. By which we mean if you can target the element selectors first, for example select all <p> to have the same font size and colour.

Then when you need to add styling to a select few or groups of elements use .classes e.g. repeating patterns like product cards or call to actions (cta's).

Leaving the use of #id's to only when really necessary for a particular purpose on a particular element e.g. the # value in a URL.