Skip to main content

Explore your training options in 10 minutes

ID vs Class CSS: Understanding the Differences

James Gallagher - December 29, 2020

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.

Get offers and scholarships from top coding schools illustration

Find Your Bootcamp Match

  • Career Karma matches you with top tech bootcamps
  • Access exclusive scholarships and prep courses

By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

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:


<p id="betaBanner">This is a banner.</p>


#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.

Venus, a software engineer at Rockbot

"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

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:


<p class="orangeBackground">This is a banner.</p>
<div class="orangeBackground">This is a banner.</div>


.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:


<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:

When a user navigates to this URL, (where 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.

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.


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.

What's Next?

James Gallagher

About the author: James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse,, Afrotech, and others.

Skip to main content