The Differences Between IDs and Classes

To style HTML with CSS, there are a myriad of selectors that can be used. The
first, and most basic, of these selectors is the element selector, which
selects all elements of that type. To be more specific with selectors, IDs and
classes can be used, and are probably the most commonly used CSS selectors.
Though you can achieve similar things with both, Classes and IDs are way
different.

Starting Simply

The first course or tutorial you read about CSS probably introduced the element
selector. This selector targets all elements of that type. So, when you plug this
into your CSS:

p {
  font-size: 16px;
}

All the <p></p> elements on your page will have a font-size of 16px. The
element selector has a low level of specificity. That is, usually, there are
multiple elements of a type on every page. Element selectors are useful when
there are only a few elements on a page, or in tools like resets or (in some
cases) layout tools. When more specificity is needed, classes and IDs help
target specific elements or types of elements.

Classes

Say, for example, you want some <p></p> elements to have differently colored
text. You might add a class attribute to the HTML with the value blue-text,
which would be targeted in CSS with the class selector, like so:

.blue-text {
  color: blue;
}

That targets all elements with the class attribute of blue-text. Classes are
useful for reusable code. Utility classes, like align-left or button, are
good candidates for class names. They are also useful for grid systems. Class
selectors have a higher degree of specificity than element selectors.

IDs

IDs are used in more than just CSS. They can be targeted in URLs, for example.
Appending an element’s ID to the end of the URL will bring that element to the
top of the browsing context. You can give that a shot now by clicking this
link, which appends #bottom to the URL. There is a <div></div> at the bottom
of this post with the ID of bottom. That should now be at (or near) the top of
your window.

IDs are also used in JavaScript and jQuery (and a lot of other front end
technologies). They are used to watch specific elements for events, provide an
easy way to target an element, and make it easier to know what you’re doing as a
developer. Take the following HTML into consideration:

<button id='btn-1' class='btn'>Action 1</button>
<button id='btn-2' class='btn'>Action 2</button>
<button id='btn-3' class='btn'>Action 3</button>

In CSS, these buttons could all be targeted with the same class selector. However,
since they each serve their own purpose, in jQuery, we’ll be targeting each
individually. There are a few ways to go about this, though. The first is a
roundabout way:

$("body:nth-child(1)").on('click', function() {
  alert("Action 1");
})

$("body:nth-child(2)").on('click', function() {
  alert("Action 2");
})

$("body:nth-child(3)").on('click', function() {
  alert("Action 3");
})

This is all well and good, but it requires (a little) thinking, creates (a little)
bloat, and could be done easier with IDs:

$("#btn-1").on('click', function() {
  alert("Action 1");
})

$("#btn-2").on('click', function() {
  alert("Action 2");
})

$("#btn-3").on('click', function() {
  alert("Action 3");
})

This makes our code much leaner and cleaner and easier to understand. We could
whittle it down more (even to just 3 lines of code), but that’s for another time.
In CSS, IDs are the most specific selector that is not a pseudo-class (like
:nth-child or :not(selector)). They are meant to target non-generic elements,
so you should never have two elements on your page with the same ID.

The Differences

The differences between classes and IDs are similar to vehicle Make and Model.
Every vehicle Ford makes has a few of the same attributes: they all have the
‘Ford’ badge on the front, they all have the same rims, they all have the same
FOB, and they all have the same airbags inside. The make is just like a class:
it defines a set of attributes for a number of different items/elements.

IDs are like models, each model of Ford cars have different attributes, like the
Mustang may have a monster V8 engine, but the Focus has a 4-banger with an
electric motor. The Focus also has 4 doors, but the Mustang has two (and it’s a
convertible!).

The Similarities

Whether an element is targeted by it’s class or ID name in CSS doesn’t change
how the element is styled. Both IDs and Classes can be used to style your page.

The Takeaway

IDs and Classes are extremely useful. Element selectors are the most vague selectors,
and class and ID selectors help target elements more specifically. IDs are the most
specific type of selector. IDs are used in other contexts, too, like linking to
specific elements in a page and being used in jQuery, JavaScript, and other
front-end technologies.

Bottom div!

Leave a Reply

Your email address will not be published. Required fields are marked *