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 trialPauline Hilborn
3,879 PointsWhy do we use a period in CSS, as in ".social-icon" as opposed to "#social icon" when selecting the HTML "class" in CSS?
When do we use "#" as opposed to "." in CSS when selecting elements from our HTML?
3 Answers
Kevin Korte
28,149 PointsClasses are always selected starting with a period, IDs are always selected starting with a hash or pound sign. That is the syntax set by the W3C that we are to follow.
Pauline Hilborn
3,879 PointsOK. Thank you so much for taking the time to explain this. It's very helpful. Yes, I just need to stick with this. I'm just following through step-by-step at the moment. I definitely don't have the whole big picture yet!
Kevin Korte
28,149 PointsNo you don't, it takes time and experience to get the whole big picture. That's why I wanted to give you a fly-by to show you there is reasoning behind it, but it's not something you should concern yourself with too much today. I've been at this 3 years and still uncover new things I didn't know. You'll eventually get there, and will see the whole picture, the logic of what to use, when, and why, one day. Happy coding and you're welcome!
Mani Saini
3,101 PointsHi team, can someone please explain why we can not use ID for social-icon? I was trying to run my code using ID : <footer id = "social-icons"> And then in CSS
social-icon a {
}
MarQwann Brown
6,598 Pointsin order to target an ID in CSS you have to use the '#' symbol. In your example to target links with the 'social-icon' ID it would be
#social-icon a{
}
Keep in mind that you can only use an ID once per page, so it may be better for you to create a class.
Pauline Hilborn
3,879 PointsPauline Hilborn
3,879 PointsThank you. OK, so it's just a syntax thing.
Kevin Korte
28,149 PointsKevin Korte
28,149 PointsAs far as selecting an element with an ID or CLASS attribute, yes, it's just a syntax thing. Without getting into too much detail today for you, there are fundamental differences between classes and ids when selecting an element, and some logic as to why you might use a class over an id, or vice versa. A class and an id hold different specificity weights in a CSS document, ids should only be used once in a document, and an element can not have more than one id. So a class is much more versatile since it isn't bound by being unique to a document, and an element can have multiple classes, while having a lower, specificity weight, thus making it generally easier to work with.
Stick with it, and you'll learn more about what I just mentioned in future lessons.