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 Dennis Aguilar
Dennis Aguilar
3,249 Points

Various CSS selector formats.

Hey everyone, what's the difference between all three of these CSS selector formats? I'm having difficulty understanding the syntax involved. Thanks.

ul.contact-info { ... }

ul contact-info { ... }

a, ul.contact-info { ... }

Jesse Lawson
Jesse Lawson
11,159 Points

http://www.w3schools.com/cssref/css_selectors.asp

This will give you the answer.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Dennis.

What we've got here are 3 selectors that mean very different things

ul.contact-info { ... }

This one selects an unordered list that has a class of contact-info. So it's less specific than an id of the same name but more specfic than just selecting ul {} It only looks for unordered lists with that class

ul contact-info { ... }

I'm assuming with this one you mean another element with a class of .contact-info. If not then this selector wouldn't work. However ul .contact-info would select any element that's a descendant of an unordered list but as a class of .contact-info

a, ul.contact-info { ... }

Finally this one is like the first selector in your examples but this is grouped with an anchor element, so any properties you add to this selector would be shared between those elements. Any anchor element and the unordered list that has the class of contact-info.

I hope this clears it up. :)

Dennis Aguilar
Dennis Aguilar
3,249 Points

Thanks a lot Jonathan! This really clarifies it for me. Also, for reference to anyone else reading, I meant "ul .contact-info" for the second example.