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 Class Selectors

Micole Noddle
Micole Noddle
5,797 Points

Why use both an id and a class for the header? Don't we need a div for an id? I find that code to be very confusing...

I've never seen it written this way. Isn't there a cleaner way to do it?

Micole Noddle
Micole Noddle
5,797 Points

Oh, sorry, here's the code from Guil's video:

<header id="top" class="main-header">

3 Answers

Wendy Peralta
Wendy Peralta
11,203 Points

Hey! I believe the reason why he kept the id="top" in the header is because remember at the bottom of the page, we have a link that says "Back to top >>" which when clicked, takes you back to the top of the page. The way to achieve this is by adding the id "#top" to the href attribute in the anchor tag: <a href="#top">Back to top ยป</a>

Since we want to style the header as well, we can go ahead and give it a class, even though it already has an id. And like David Tonge said, IDs are not exclusively for divs. You can use IDs in any element.

Hope this helps! :)

You don't need a div to use an ID. You can actually add an ID to any element.

ID's are unique
Each element can have only *one* ID
Each page can have only one element with that ID

Classes are NOT unique

You can use the same class on multiple elements.
You can use multiple classes on the same element.

You can have both. IDs are good as hooks for Javascript. 

I think that using both allows you to make specific changes to the header by using the ID, and then shared changes by using the class. For example, we may want the top header section to always stay blue, so we would use an ID, but we may want the text to match the paragraphs in the body so we could use the class.