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 Adding Pages to a Website Add Iconography

Posted by Aaron Gomez
Aaron Gomez
2,271 Points

Why not say ".phone"?

In the video, Nick explains why he didn't include a space after the li nested in .contact-info when he wrote ".phone". My question is, since he identified the class as phone, a class no other property shares, why couldn't he just write li.phone or .phone. Why does the computer need to know that the element is nested inside .contact info?

2 Answers

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

Lets say you have a page with multiple elements with a class of phone.

<div class="contact-info">
   <ul>
      <li class="phone">
      </li>
   </ul>   
</div>


<div class="other-class">
   <ul>
      <li class="phone">
      </li>
   </ul>   
</div>

If you just use .phone then the styles apply to both li's but if you use .contact-info .phone it will only apply the styles to the first div.

Hope this helps.

Aaron Gomez
Aaron Gomez
2,271 Points

Yes it does. But in the case of the lesson, there was only one element with the class "phone". If that is the only element you want to work on, would it have worked to only say .phone?

Matt F.
Matt F.
9,518 Points
Matt F.
Matt F.
9,518 Points

Yes, if you have an element with the phone class in the HTML and the only CSS selector refers to the phone class, it will apply the defined styles to that element.

What I outlined above is a reasoning for why you may want to add more specificity when developing pages.

Michael Plemmons
Michael Plemmons
9,393 Points
Michael Plemmons
Michael Plemmons
9,393 Points

This is sort of on topic with this, but since we specified li.phone, would it still be correct to specify .contact-info as ul.contact-info? The reason for not doing that is because the class was only used once? Same with the .phone circumstance? Just seeing if I'm correct in this line of thinking.