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

HTML How to Make a Website Adding Pages to a Website Add Iconography

In our CSS, why select .contact-info li.phone a - seems the same thing happens if you select .phone a?

In other words, when selecting classes of elements embedded inside of other elements, is it OK to select just the final (nested most deeply) class, if it is unique, without having to select the whole path to it? Similarly, why select .contact-info instead of ul.contact-info? Looking for some consistency, maybe there is none.

2 Answers

The reason you would use the longer version has to do with selector specificity.

CSS applies styles down the cascade. This means the first time you style a <ul>, it will be passed down to all others. The way to override that is by becoming more specific. That means using more and more specific selectors.

There is a great article on CSS tricks that can explain it way better than I can. :) https://css-tricks.com/specifics-on-css-specificity/

Hope this helps and answers your question.

Julie Myers
Julie Myers
7,627 Points

There is more then one selector path you can take to get to the same element. The following will help you decide which path to take:

(A) If the element you want to style is unique you can just use it's id or class 
or even if it's attribute has a unique value can be used as well.  For  example:
#unique {
  color: blue;
}

img[class="dogs"] {
  color: gray;
}


(B) Sometimes if you want to select just one element you will need to be very 
specific about it and take the longer path.  Let's say you have three ul lists and 
you just want to get to the second list:
<ul>
  <li>Hi</li>
  <li><span id="unique">Take Me!</span></li>
</ul>
ul li #unique {
  color: green;
}


(C) If you want to style two or more elements the same, then you just need to 
give them the same class name and just use that class name to get to them.  In 
other words a very short path:
.className {
  color: orange;
}

There are a lot of different selectors out there to choose from and knowing them will help you choose what selector path to take. Example selector types are: universal, id, class, descendant, attribute, and combinator selectors. There are more.