When comparing CSS class vs ID, the difference is that CSS class applies a style to multiple elements. ID, on the other hand, applies a style to one unique element. ID is also special in that you can use a special URL to link directly to an element and it’s used by JavaScript.
In CSS, selectors are used to target a specific element or range of elements on a web page. Once an element has been targeted, a style or set of styles can be applied to the element.
There is a wide range of selectors available. Two of the most commonly used are class and ID. Both are used to target elements to which a style should be applied.
CSS Class vs ID Selectors
What is the difference between the class and ID selectors? This is a question asked by many developers who are new to CSS, and one that we are going to answer in this guide.
By the end of reading this guide, you’ll know the differences between these two selectors. You’ll have the information you need to make an informed decision about which selector to use in your code. Let’s get started.
CSS Selectors
When designing a web page, you will want certain styles to apply to specific elements on the page. For instance, you may want to set the text color of all <p> tags to green or change the font size of a header.
Selectors allow you to target specific elements on a web page that you can apply styles to. In CSS, there are many selectors available, such as universal selectors, descendant selectors, child selectors, and grouping selectors. If you’re interested in learning more about CSS selectors, read our beginner’s guide to CSS selectors.
Two selectors, class and id, are used to apply styles to elements based on the class and ID assigned to an HTML element, respectively. But these selectors are often confused, so let’s explore how each one works.
The ID Selector is Unique
The id selector allows you to define style rules that apply to a single element on the web page. Each web page can only have one element with a single ID attribute. This means the ID selector can never be used to style more than one element.
ID selectors are defined using a hash sign. They are immediately followed by the ID value that you want to apply a set of style rules to. Here is an example of the ID selector in action:
<html>
<p id="betaBanner">This is a banner.</p>
<style>
#betaBanner {
color: white;
background-color: orange;
}This style applies to the <p> element in our HTML document with the ID betaBanner. The style will set the element’s background color to orange and the color of the text in the element to white.
The Class Selector is Not Unique
A class selector allows you to define style rules that apply to any element with a class attribute equal to a certain value.
As we discussed earlier, the ID selector can only be used to style one element. This is because IDs can only be used once on a web page. Classes, on the other hand, can be used across multiple elements. So, if you apply a style using a class selector, any element which shares that class will be subject to the styles you define.
Class selectors are defined using a period, followed by the value of the class that you want to apply a set of styles to. Here’s an example of the class selector in action:
<html>
<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>
<style>
.orangeBackground {
background-color: orange;
}This style sets the background color of our <p> tag to orange. In addition, the style sets the background color of our <div> tag to orange. This is because both tags share the same class name: orangeBackground.
In addition, a web element can share multiple different classes. So, if we wanted to apply a class called large to our above <div> tag, we could do so using this code:
<html> <div class="orangeBackground large">This is a banner.</div>
In this code, any style rules defined for the orangeBackground and large classes are applied to our web element. With an ID, on the other hand, we could not replicate this behavior, because each element can only have one ID.
IDs Have a Unique Browser Function
So far, we have discussed the fact that IDs can only apply styles to one element. Unlike classes that can apply styles to multiple elements. This is not the only difference between the class and ID selectors.
In the browser, classes have no special function. Their main purpose is to allow you to apply styles to a range of elements on a web page. IDs, on the other hand, can be used by the browser to navigate to a certain part of the web page.
If you assign an element an ID, you can use a special URL to link directly to that element. This behavior works because IDs are unique on a web page.
Suppose we wanted to send over a link to our website that scrolls the user automatically to a header. We could do so using this code:
<h3 id="section3">Section Three</h3>
In this code, we have assigned an ID to the <h3> tag that contains the text Section Three. Now, we could send a user a direct link that scrolls them to that element on the web page. This is done by using the following URL:
https://domain.com/index.html#section3
When a user navigates to this URL, (where domain.com is the URL of your website), they’ll scroll to the heading with the ID section3. This behavior does not apply to classes.
IDs Are Used by JavaScript
If you have any experience using JavaScript, you’ll know that IDs are commonly used in that programming language. The function getElementById allows you to select an element on a web page. It relies on the fact that only one element can share the same ID.
Classes, on the other hand, can reflect multiple elements on a web page. They would not be useful if you want to work with a particular element in JavaScript.
You Can Use Both ID and CSS Class Selectors
There are no rules in HTML that prevent you from assigning an element both an ID and a class.
"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
Suppose you want to apply the styles associated with a class called backgroundOrange to a <div> tag. However, you also want to apply a few unique styles to the <div>. You could do so using this code:
<div class="backgroundOrange" id="customDiv"></div>
This <div> tag will be subject to the styles for the class backgroundOrange. In addition, it will also use the styles applied to the customDiv ID using an ID selector.
Conclusion
When you’re working with CSS, there are no specific reasons forcing you to use an ID over a class. However, it is best practice to only use IDs if you want a style to apply to one element on the web page, and to use classes if you want a style to apply to multiple elements.
In this tutorial, we discussed, with reference to examples, the basics of the CSS ID and class selectors, and we compared and contrasted the two. Now you’re ready to start using the CSS ID and class selectors like an expert developer!
About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.
