CSS Class vs ID Selectors — Understanding the Difference!

Photo by Fotis Fotopoulos on Unsplash

When I first started learning about CSS (and I still am) I felt fabulous applying styles to elements and making the web page look decent (Although still not making the 21st century in style). Till I met one day the ID and class selectors where were my first obstacle in my learning journey. I just couldn’t understand what was the difference between the two, if both of them allows me to select HTML elements so I could apply style rules to them, why do we need two!

Today I’ll try to explain that in a way that I wished someone would to my younger self, let’s get started!

The magnificent CSS

All CSS does is apply style rules to certain HTML elements. With that being said, we can distinguish two steps:

  1. Selecting HTML element(s)
  2. Applying style rules to it/them

In this article we will be focusing on the first part.

How to use class and id

One of the many ways we can select HTML elements is by using the attributes class and id:

Using HTML id and class attributes
Using HTML id and class attributes

And the way we can reference them in CSS is by prefixing:

  • The ID name with “#”
  • The class name with “.”
Referencing elements with id’s and classes
Referencing elements with id’s and classes

The fight: ID vs Class

ID

  • It is used to identify unique elements to change their presentation (with CSS) and/or their behavior (with JavaScript).
  • An HTML element can only have one ID.
  • An ID can only be assigned to one HTML element.
  • IDs can be used to navigate to certain parts of the page:

Example:

Adding an anchor that takes you to the contacts section:

Anchor to contacts section in the page
Anchor to contacts section in the page
  • an ID has a higher specificity than a class

The best definition I found of specificity is W3S’s (you can learn more about it there):

If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.

Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.

For example if you apply to the same element (selected once by ID and then by class) conflicting styles, the styles applied via ID will win:

HTML element conflicting styles example
HTML element conflicting styles example
CSS conflicting styles example
CSS conflicting styles example

Due to the cascading nature of CSS (last rule applied overrides) we expect that the styles for the class weak are the ones applied. But that is not the case!

The reason for that being the specificity hierarchy that favors IDs over classes!

Learning about it is crucial and it will save you a lot of time in the future understanding why certain styles are not applied.

Class

  • Is not a unique identifier.
  • A class can identify multiple HTML elements.
  • We can assign many classes to an HTML element:
Multiple classes to the same HTML element
Multiple classes to the same HTML element
  • A class has an inferior specificity (as we saw in previous examples)

What does JavaScript have to say?

One of the things I love the most about programming is that the questions you raise can be often answered by the environment on which you develop!

If you are familiar with JavaScript, you will notice that it points out some differences between IDs and Classes!

JavaScript pointing out some difference between IDs and Classes
JavaScript pointing out some difference between IDs and Classes

Thank you for reading!

These were the differences between Classes and IDs, I hope you enjoyed reading the article!

Any feedback or constructive critique is warmly welcomed and appreciated, so please tell me what you think in the comments so I can better the quality. Thanks for reading ❤️.

Follow my blog and my Twitter for more.

Have a nice one!

--

--

--

Just a front-end guy and a bookworm who loves to share what he is learning.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is the next version after AEM 6.5?

Software Architectural Patterns in a nutshell

A sensible tech stack for apps

Authentication in REST services using JSON Web Tokens with Outsystems

Is Kotlin multiplatform ready to use?

Java 9 Features

Plug 0.5.0 — Sending to ICNS Names👤 Sonic Activity Enhancements, and Clock Validation! 🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mohamed El Amine Yamani

Mohamed El Amine Yamani

Just a front-end guy and a bookworm who loves to share what he is learning.

More from Medium

A Walkthrough for fetching API

Building front-end Javascript, CSS and HTML. Joke Generator.

How much CSS is Enough before Moving to Javascript?⚡️

Perfect Guide to Learn CSS and Move to Javascript

How to compile SASS into CSS and watch for changes?