CSS CSS Basics (2014) Basic Selectors Class Selectors

Noah Fields
Noah Fields
13,985 Points

Why would I ever use an ID instead of a class?

An class is reusable where an ID is not - however, nothing mandates that a class must be used more than once. If you were to create an ID for a given element, and then later decide that you want that same styling for a different element, you'd have to go back and change both your HTML and your CSS for it to work properly. However, if you had originally created it as a class instead, you could simply apply it to whatever additional element(s) you want with minimal effort. If you do in fact end up using that particular style for only one element, then an ID will suit your purposes fine, but again, so will a class. I see only advantages to using classes, and no advantages at all to IDs. What situations or purposes would result in using an ID rather than a class?

3 Answers

Josh Bennett
Josh Bennett
15,258 Points

I found this on StackOverflow...

"One big difference: in CSS, a class has a lower importance level than an ID.

Imagine that each specification in a CSS declaration added a certain number of points to that declaration's value. Let's say the points go something like this (totally made up, but whatever):

Tag name ('a', 'div', 'span'): 1 point
Class name ('.highlight', '.error', '.animal'): 10 points
ID ('#main-headline', '#nav', '#content'): 100 points

So, the following declarations:

a {
    color: #00f;
}

.highlight a {
    color: #0f0;
}

#nav .highlight a {
    color: #f00;
}

are worth 1, 11, and 111 points (respectively). For a given tag, the declaration with the highest number of points that matches it "wins". So for example, with those declarations, all a tags will be blue, unless they're inside an element with the "highlight" class, in which case they'll be green, unless that element is inside the element with id="nav", in which case they'll be red.

Now, you can get yourself into tricky situations if you're only using classes. Let's say you want to make all the links in your content area blue, but all the links in your foo area red:

.content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

By my previous (made up) scale, those both have 11 points. If you have a foo within your content, which one wins? In this situation, foo wins because it comes after. Now, maybe that's what you want, but that's just lucky. If you change your mind later, and want content to win, you have to change their order, and depending on the order of declarations in a CSS file is A Bad Idea. Now if, instead, you had the following declaration:

#content a {
    color: #00f;
}

.foo a {
    color: #f00;
}

Content would always win, because that declaration has a value of 101 (beating foo's 11). No matter what order they come in, the content declaration will always beat the foo one. This provides you with some very important consistency. The winners won't arbitrarily change based on changing orders in the file, and if you want to change the the winner, you have to change the declarations (maybe add a #content in front of the .foo declaration, so it will have 111 points).

So basically, the differences in values are important, and you get a lot of inconsistency and seemingly arbitrary winners if you just use classes."

Jason Allam
Jason Allam
4,520 Points

You can use IDs for anchors. For example, if you want a navigation button to jump to a particular section on the same page of the website. Simply use:

<a href="#section>Jump to Section</a>

And adding the "section" ID to a div will allow the button to jump to that div when clicked. This use case does not work for classes.

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 89,176 Points

I use an ID commonly to create a wrapper div element for the main content of my websites.

ID's are also useful for intra document links in single page websites. They have their uses! :-)