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
Reza Sorasti
491 PointsQuestion on using ID Selector
In the six and the seventh minute of this video: https://teamtreehouse.com/library/how-to-make-a-website/css-cascading-style-sheets/use-id-selectors
The instructor says:
“Let’s start organizing our layout a little bit. We need to add some markup in order to wrap the main part of our content and select it appropriately. To do that, we’re first going to switch back over to our HTML and create an element called a div, which doesn’t have any semantic meaning at all. Rather, it’s a way for us to encapsulate or divide a group of elements. … Now, we will probably have may divs on the page, so we need to identify this div more specifically according to its function. So, inside of our opening div tag right here, I’m going to type a space, and then I’m gonna add an attribute called id to identify it. … an id attribute will uniquely identify elements on the page. “
So, he went on and created the div element using the code.
<div id =”wrapper”>
…
</div>
Then he wrote this CSS code to select the div that he created:
"#wrapper {
}"
My question is why did he have to create a name for the div element? Couldn’t he just encapsulate all those element in to div like this instead <div id =”wrapper”> … </div> And then to wrote this CSS code to select the div that he created? div { }
So div in the CSS code would have been an element selector.
2 Answers
Ryan S
27,276 PointsHi Reza,
You are right in that he could have directly selected the div element in the CSS, but the problem is that selecting the div element will select all div elements and apply that style to all of them.
As you follow along in developing the website you will see that he will be creating many divs, and some will be nested inside one another. You need a way to differentiate between them so you can target specific divs with different styling properties. You differentiate between them by assigning them id's and classes.
Hope this clears things up.
Reza Sorasti
491 Pointssure, that makes sense. When would you use an id and when would you use a class?
Ryan S
27,276 PointsWell in general, you'd use classes if you want to apply the same styles to multiple elements. For example, say you had 10 paragraph elements on a page and you wanted to style 5 of them in a particular way. You could assign those 5 paragraph elements the same class, then target that class in the CSS. You can also have more than one class assigned to a single element.
ID's have to be unique, meaning you can only use an ID once per HTML page and an element can only have one ID. They are useful if you know you are only going to have one special element that needs to be styled. Back to the 10 paragraph example, if you had one paragraph that needed a special styling applied to it that was different than the others, you could assign it an ID, then target the ID in the CSS.
ID's also have a greater specificity than classes. You can assign an element both an ID and a number of classes, but the ID targeted styles in the CSS will take precedence if there is a conflict. You can use this to your advantage if you wanted to apply all the styles in the classes, but then also add or override some properties using the ID.
There is also another use for ID's and that is to allow you to link to different parts of a page. Say you have long list of frequently asked questions on a single page. You could assign each question a unique ID, then create a navigation menu at the top where you use anchor tags to link to a question's ID. When you click on it, the page will automatically jump to where the ID is located.