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 JavaScript, we’ll be targeting each individually. There are a few ways to go about this, though. The first is a roundabout way:

document.querySelector('body:nth-child(1)').addEventListener('click', (e) => {
  alert("Action 1");
})

document.querySelector('body:nth-child(2)').addEventListener('click', (e) => {
  alert("Action 2");
})

document.querySelector('body:nth-child(3)').addEventListener('click', (e) => {
  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:

document.querySelector('#btn-1').addEventListener('click',(e) => {
  alert("Action 1");
})

document.querySelector('#btn-2').addEventListener('click', (e) => {
  alert("Action 2");
})

document.querySelector('#btn-3').addEventListener('click', (e) => {
  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.

No Comments...yet