Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Cameron Monzon
Cameron Monzon
7,115 Points

What is the difference between these two selectors: . #

Up to now we have mainly used the # selector in CSS. In what cases do we use the . selector?

You use the # to style a HTML tag with an id such as: 

<div id="foo"></div>
#foo {};
You use a . to target a tag by its class:

<div class="foo"> 
.foo {};

2 Answers

Hi Cameron,

If my understanding of your question is correct, you are asking what the difference is between # (which is an id selector and . (which is a class selector).

Both of them are used to target specific parts of the code. However, the difference is that a # (id) is unique and can only be used once, whereas a . (class) can be used multiple times on different parts of code.

You use a . selector when you want to style multiple elements with with the same css code.

For example, if you want to style the header and footer the same way (using the exact same css code) then you would use the . selector.

If you want to know more about this, here is a simple explanation http://css-tricks.com/the-difference-between-id-and-class/

Hey Cameron,

I had the same question. You may find this helpful. http://www.w3schools.com/css/css_selectors.asp