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 Gemma Weirs
Gemma Weirs
15,054 Points

Why use .contact-info li.phone instead of .contact-info .phone?

So Nick types:

.contact-info li.phone a {}

and I'm wondering why he didn't type:

.contact-info .phone a {}

instead?

Is it a specificity thing? I understand that if there's a space between li and .phone that the browser would think .phone was nested within li, but I don't understand why we should include li at all. Wouldn't .contact-info .phone a do the same thing as .contact-info li.phone a, since .phone is nested within .contact-info?

TIA.

Gemma Weirs
Gemma Weirs
15,054 Points

To update my question, the video I'm referring to is at https://teamtreehouse.com/library/how-to-make-a-website/adding-pages-to-a-website/add-iconography

There's only the one list item that has the class applied, and so far there hasn't been any other rules applying to this specific class. The only thing Nick explained about this particular rule was why there isn't a space between li and .phone.

3 Answers

Steven Parker
Steven Parker
243,898 Points
Steven Parker
Steven Parker
243,898 Points

It depends on what else is in the HTML.

If there are no other elements with the phone class, and there are also no other CSS rules that would apply and have the same specificity, then leaving off the tag name would make no difference visually, and would make the rule a bit more efficient.

You didn't provide a link to the lesson, but I would guess it was done this way as an example of preparing for (potential) future development where the specificity would actually be needed.

Alexander Davison
Alexander Davison
65,469 Points

Darn. Answered at almost the same time again! :unamused:

Upvoted your answer anyway :wink:

Alexander Davison
Alexander Davison
65,469 Points
Alexander Davison
Alexander Davison
65,469 Points

You are right about it a specificity thing. Here's what the selector is in plain English:

.contact-info li.phone a means:

Select all elements within a element of class contact-info. With those selected, get all lis that have a class of phone. Within those, search for an a element.

I guess the program will work without the li, but it is easier to understand in the code and is better to use because maybe you'll have an element that has the same class but a different tag. If your program doesn't have the li part, it will make the output unexpected because it also select those elements.

I hope this helps. ~Alex

Gemma Weirs
Gemma Weirs
15,054 Points
Gemma Weirs
Gemma Weirs
15,054 Points

Thanks guys. :)