Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Basic Selectors ID Selectors

Hasan Nagaria
Hasan Nagaria
4,855 Points

id/class question

Okay, so in the first course we briefly touched on this and I know the differences etc.

But the one thing that I confuse right now is when we do something like....

ul li a {

}

maybe the syntax is wrong but you get what I mean when we need to pick something from within something.

What if i put an ID for everything? would that let me easily select everything? or would i still need to pick one at a time.

3 Answers

Nathan Blair
Nathan Blair
9,551 Points

Among previous answers, you should also remember what's called "specificity" (I cannot say that word three times fast).

The beauty of cascading style sheets is that styles are applied over one another. Because of this, browsers have been programmed to interpret which style will be most relevant to the selected element. You may have a class and an ID that are targeting the same element with conflicting styles. Which one will prevail?

In this case, the ID has a stronger specificity than a class, so it will win no matter where it's at in the cascade.

Yes, it's also important to consider whether you'll be re-using the style, in which case a class will be preferable.

And on the topic of whether it's more confusing to use classes or IDs, I think it's just important to name them clearly so that when you're looking at your CSS document, you know exactly what they are targeting.

Take a look at this useful article to learn more about specificity: https://css-tricks.com/specifics-on-css-specificity/

highlandcow
highlandcow
7,352 Points

You COULD ID everything. However, it tends to be difficult to understand which style applies to which element if you're only using IDs.

Running with your example...

<style>
ul li a {
 color: #ff0c00;
}
</style>

<ul>
<li>
<a href="#">link</a>
</li>
</ul>

...does the same as...

<style>
#test {
 color: #ff0c00;
}
</style>

<ul>
<li>
<a href="#" id="test">link</a>
</li>
</ul>

CSS and HTML are typically broken in to at least two separate documents. If I'm only looking at the CSS, the advantage with the first approach is I know precisely what element I've modified. I can't really tell (unless the name is really intuitive) with the 2nd approach.

Of course, you could do...

<style>
ul li a#test {
 color: #ff0c00;
}
</style>
<ul>
<li> 
<a href="#" id="test">link</a>
</li>
</ul>

...but there's no real advantage to this approach unless you need to apply some unique styling to that specific link.

Hope that helps!

rydavim
rydavim
18,814 Points

It depends on what you mean by put an ID for everything.

Generally you don't want to over-use IDs, because they can make reusing styles difficult. For example, if you have four different article headers and you want them all to look the same, you could select them using an h1 element. However, if you give them each IDs, then you'll need to style each one separately.

If you want to style multiple things that you can't necessarily select using elements, you can use classes. Classes are a bit like IDs, but you can associate them with more than one element.

Hopefully that helps, but let me know if you have additional questions.