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 How to Make a Website Customizing Colors and Fonts Use Color in CSS

Posted by April Ehrlich
April Ehrlich
4,164 Points

Why do some CSS selectors have #, and some do not?

I was wondering why the wrapper and logo are written as #logo and #wrapper in CSS coding, but header and h1, h2, and nav a do not.

4 Answers

eck
eck
43,038 Points

HTML elements can be selected by CSS in many ways, some of the common ones are to find it by selecting its element tag, class or id.

When you see a selector like "h1", or "nav" you are looking at a basic element selector that will find, in this case, every h1 or nav and apply a style.

In the case of "#logo" it means you are selecting an element with an attribute called id that is "logo". Id selectors are much more specific than element selectors and their styles typically will override the style of a general element selector.

Here you can find references to other CSS selectors: http://www.w3schools.com/cssref/css_selectors.asp

Damian Sieczkowski
Damian Sieczkowski
9,730 Points
Damian Sieczkowski
Damian Sieczkowski
9,730 Points

"#' specifies an html element with an id assigned to it.

eg 

<div id="wrapper">
</div>

Setting an id allows you to easily style particular parts of your website. So instead of declaring a style for all the <div> elements on your website like this... 

div {
      width:600px;
}

You can declare it for only divs with the id "wrapper" like this...

div#wrapper{
      width:600px;
}
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Damian,

You have a space in your selector. It should be div#wrapper or just #wrapper

Tawny Bartlett
Tawny Bartlett
24,674 Points
Tawny Bartlett
Tawny Bartlett
24,674 Points

header, h1, h2 and nav don't have "#" because they don't need them if you want to target just the HTML tag.

If a header, h1, h2, p tag etc has an ID on them, like 

<h1 id="maintitle"></h1>
``` , then you can style that using #maintitle {}.

If a header, h1, h2, p tag etc has a class on them, like 
```html
<h1 class="maintitle"></h1>
```, then you can style that using .maintitle {}.

If you wanted to style all H1 tags 
```html
<h1></h1>
```, you'd style it just using h1 {}.
:-)
April Ehrlich
April Ehrlich
4,164 Points
April Ehrlich
April Ehrlich
4,164 Points

Thanks for your explanations! I think I understand now. I will probably know when to use an id selector versus an element selector more as I gain more experience in coding.

eck
eck
43,038 Points

For sure!

Have an awesome time, and keep learning :D