ID vs. Class CSS: Which Should You Use?

ID and class are two ways you can make your code cleaner and more efficient when working in HTML. Learn how to utilize these signifiers.

BestColleges.com is an advertising-supported site. Featured or trusted partner programs and all school search, finder, or match results are for schools that compensate us. This compensation does not influence our school rankings, resource guides, or other editorially-independent information published on this site.

Ready to start your journey?

portrait of Shauna Blackmon
by Shauna Blackmon

Published August 18, 2022

Reviewed by Darnell Kenebrew

Our Review Network

BestColleges is committed to delivering content that is objective and accurate. We have built a network of industry professionals across healthcare and education to review our content and ensure we are providing the best information to our readers.

With their first-hand industry experience, our reviewers provide an extra step in our editing process. These experts:

  • Suggest changes to inaccurate or misleading information.
  • Provide specific, corrective feedback.
  • Identify critical information that writers may have missed.

Our growing Review Network currently consists of professionals in fields like business, nursing, social work, and other subject-specific industries; professionals in higher education areas such as college counseling and financial aid; and anti-bias reviewers.

Reviewers typically work full time in their industry profession and review content for BestColleges as a side project. Our reviewers are members of the Red Ventures Education Freelance Review Network and are paid for their contributions.

See a full list of our Review Network contributors.

Edited by Kelly Thomas
Share this Article


When creating a website, it is crucial to have a unified style throughout the page. Any inconsistencies, such as using fonts or sizes that are not exact, can be very distracting to readers. However, if web developers were forced to go through each element within every page to make sure everything was in the correct form, it would be a giant pain.

Thankfully, developers can avoid this tedious task by implementing CSS selectors. There are five categories of selectors, but this article focuses on simple selectors: ID and class selectors.

When working in CSS, IDs and classes can identify and block elements together to ensure they share design elements. Properly used, IDs and classes can make code cleaner and easier to structure. They can be tricky to figure out at first, but once you get the hang of using these signifiers, they can simplify and speed up the coding process.

What Is ID?

An ID allows developers to identify a single element in the HTML code and apply a particular style to it. IDs are specific and targeted, similar to a proper noun. There can be multiple elements on a page, but the ID marks a specific element. Each element can only have one ID, and each page can only have one element with that specific ID.

As an example, if we have five divs in our HTML, we can create an ID and have each of them be green and 60 pixels tall. IDs are identified with a hash character (#), followed by the ID name:

div{
background-color: #008000;
height: 60px;
}

What Is Class?

You should use a class if you need to use the same selector more than once within a page or a site. While an ID is specific to a single element, classes can be assigned to multiple elements on a page or throughout the website. They are not unique. And while a single element can only have one ID, it can have multiple classes.

Classes are denoted by a period, followed by the class name. In this example, all elements tagged with the class "center" will be centered and green:

.center {
text-align: center;
color: green;
}

What's the Difference Between ID vs. Class?

At first, figuring out when to use classes and IDs can be hard because they do very similar things. The difference is in the scale of the action and how it is performed. It usually takes developers a little while to get a feel for when to use each selector, but it gets easier with practice.

One way to think about IDs and classes is as barcodes and serial numbers. For example, all of the products in an electronics store have both a barcode and a serial number, but they provide different types of information.

All phones with the same make and model will have the same barcode to denote information such as price or specific product information, but it will not help you tell one phone from another. A serial number, however, is unique to a specific phone. This will not tell you anything about the price or where to locate it in the store, but it can identify a particular object.

Often, a specific element might have both an ID and a class (or multiple classes) associated with it.

Class

  • Selects a group of elements
  • Is written with a hash symbol followed by the ID name
  • Can be used to mark multiple elements within a page

ID

  • Selects a single element
  • Is written with a period followed by the class name
  • Can only be used to mark a single element in a page

Which Should You Choose?

At first, it can be difficult to understand when you should use an ID versus a class. Because they are similar, using one rather than the other is not exactly wrong, but correctly identifying when to use each signifier properly will leave you with cleaner code that is easier to work with.

No matter which you choose, be sure to identify the element(s) you are referencing clearly. Something might make sense to you in the moment, but it could be less obvious after a few days away from the code.

Frequently Asked Questions About ID vs. Class CSS

Is ID stronger than class CSS?

ID selectors are performed before class selectors because they are more specific. Therefore, they have priority. First, the browser determines the cascade origin and importance. Then, an algorithm called Specificity determines the order of operations for CSS declarations by assessing the weight of that particular CSS selector.

With just the two selectors, this is fairly simple. However, remember that there are numerous other selector categories. The more you use, the more difficult it can be to anticipate the order and have the code run correctly.

The final order is:

Is ID faster than class CSS?

Since IDs are the first actions to be resolved, technically, they are faster. With modern processing speeds, however, the difference is so small that it should not be a determining factor in how you write your code.

Figuring out which selectors to use (and when) will help you write cleaner code, which is a more critical factor than the speed of operation.

Can you use class and ID together?

Yes. An element can, and often does, have both a class and an ID selector. In fact, using multiple selectors can be an effective organizational tool — if you do it well. An example might look like this:

<aside id="main-sidebar" class="sidebar widget-area">

In some cases, an element can have an ID and multiple classes or other selectors. However, this can start to get confusing for new developers, so it is best to practice and make sure you clearly understand when to use the various selectors before starting to stack them.

Feature Image: Rohane Hamilton / EyeEm / Getty Images

BestColleges.com is an advertising-supported site. Featured or trusted partner programs and all school search, finder, or match results are for schools that compensate us. This compensation does not influence our school rankings, resource guides, or other editorially-independent information published on this site.

Compare your school options.

View the most relevant school for your interests and compare them by tuition, programs, acceptance rate, and other factors important to find your college home.