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

Posted by Evan Payne
Evan Payne
16,564 Points

CSS selectors in, "Build a Responsive Website" project

I started the "Build a Responsive Website" project after completing the "Build a Simple Website", HTML and CSS deep dives and noticed some CSS selectors that I wasn't familiar with on the new project (I didn't see them written/explained). For example:

 #nav ul li.contact { }

It looks like the selector starts from least specific to most specific. My question is, is this necessary? I removed "#nav ul li" from my code and it works just fine with the class selector alone. Also, I never noticed Guil writing css this way. Should I be doing this, or do both ways work the same?

Thanks for the help!

Adam Sackfield
Adam Sackfield
Courses Plus Student 19,663 Points

You would see a selector like that is compiled with Sass i would assume. As with sass you can nest selectors like below

nav {
     background: blue;
     & ul {
           list-style: none;
}
     & li { 
            display: inline;
}
}

and when it compiles from .scss to .css it would be as follows 

 nav { background: blue; }
 nav ul { list-style: none; }
 nav ul li { display: inline; }

and so as you can nest them till your hearts content then it will do all the work for y0u

3 Answers

shervin mashayekh
PLUS
shervin mashayekh
Courses Plus Student 11,915 Points
shervin mashayekh
shervin mashayekh
Courses Plus Student 11,915 Points

when you use .contact you select all the "contact" classes in your document , but when you get more specific and say #nav ul li.contact you only select the class "contact" whit in your #nav that make's it more specific. so it always depends on what you want to do with your document . in your case because contact only used once in document it dose not matter that you use it more specific or less. i suggest that you read this article by Chris Coyier it's all about CSS Specificity. http://css-tricks.com/specifics-on-css-specificity/

Evan Payne
Evan Payne
16,564 Points
Evan Payne
Evan Payne
16,564 Points

Thanks! This definitely helps a lot.

shervin mashayekh
PLUS
shervin mashayekh
Courses Plus Student 11,915 Points
shervin mashayekh
shervin mashayekh
Courses Plus Student 11,915 Points

You're welcome! I'm glad I could help