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

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

Erik Krieg
Erik Krieg
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

"#' 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;
}

Hi Damian,

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

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 {}.
:-)

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.

Erik Krieg
Erik Krieg
43,038 Points

For sure!

Have an awesome time, and keep learning :D