Is the ID or the Class faster in CSS?

The correct answer is: It depends! Otherwise, it’s usually the ID.

The ID is a unique identifier, which usually means that the browser does not have to parse the whole document. Once it finds the query, it can skip looking at the rest of the page. Classes, on the other side, always need to be found wherever they might be in the document, whether that is the first or the last line. Once the browser has found the element it’s been looking for, it can set its parameters.

What do I mean with that?

Let’s say there is an object, referenced to with an ID:

<a href="/index.php" id="home">HOME</a>

There is another one, which is referenced through class:

<a href="/index.php" class="register">Register</a>

I believe that the CSS execution can be faster in the first case, because there can be only one ‘home’, while ‘register’ can occur later in the file, even multiple times.

So what happens in reality? My original idea is the theory. Things should work like that, since the ID is an unique, but practice shows that browsers tend to apply styles to all IDs despite there should only be one of each. In some cases the developer makes the mistake of using an ID multiple times, and the browser generously fixes it without telling anyone.

I referenced multiple sites and IDs seems to be faster, even if only marginally.

The problem is that the speed benefit is lost as soon as there is a single inherited element. For instance, in the next example we’re going to use two pieces of code. In this case, the marginal benefit, which the ID had, melts away.

#ads li{}
.ads li{}

You should know when to use IDs and when it hurts to do so! There are instances when the code is significantly hurt by over-usage of IDs, because the task could be done with classes more efficiently.

For this reason, I suggest you never implement the following example. When you’ve got to do something like this, you’ve got to use a class instead.

  <style>
    #link1, #link2, #link3 {color: red;}
  </style>
<div>
  <a id="link1"  href="link1">link1</a>
  <a id="link2"  href="link1">link2</a>
  <a id="link3"  href="link1">link3</a>
</div>

A bit better, but still not perfect:

  <style>
    .link{color: red;}
  </style>
<div>
  <a class="link"  href="link1">link1</a>
  <a class="link"  href="link1">link2</a>
  <a class="link"  href="link1">link3</a>
</div>

With a small correction, the following is the perfect solution if you’d like to use the same style again later:

  
<style>
    .links a{color: red;}
  </style>
<div class="links">
  <a href="link1">link1</a>
  <a href="link2">link2</a>
  <a href="link3">link3</a>
</div>

If it’s going to occur only once, ID is the correct solution:

  <style>
    #links a{color: red;}
  </style>
<div id="links">
  <a href="link1">link1</a>
  <a href="link2">link2</a>
  <a href="link3">link3</a>
</div>

So far we’ve covered the CSS part of the issue, but you should also consider the fact that JQuery and JS are more and more often used to call CSS elements.

I prepared a test task, where I evaluate if searching for ID or Class is faster in JQuery. I think the result is self-explanatory.

Is ID or class faster in CSS

Thank you for Samuel Ferrell .

Tags: , , , ,

About Ildiko Toth

I am a web developer with more than 3 years of experience using PHP, HTML and CSS . I started to experiment and work with Zend Framework and JQuery, too. I think the best way to learn something is to do it. I decided to do things, and share anything interesting I find along the way :)