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 Tom Lawrence
Tom Lawrence
8,685 Points

Selector question

Hi all,

The tutorial I am following is using CSS to style following list item:

<ul class="contact-info">
          <li class="phone"><a href="tel:0191 111 1111">0191-111-1111</a></li>
          <li class="mail"><a href="mailto:tom@whereever.com">tom@whereever.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=username">@username</a></li>
        </ul>

It is using this selector (works as expected):

.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
}

What I am having trouble understanding is the selector, I can see how its working but I cant see why you cant also get the same result by just selecting the list item? just asking so i dont have trouble working out how/what to select in the future..

.contact-info li {}

Id have thought this would select all list items within the class contact-info, but dosnt seem to.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Tom,

.contact-info li would select all the li elements within an element with a class of "contact-info" You are correct.

However, all those styles are supposed to be applied to the a elements within the li elements.

So that is why the selector is .contact-info a It's the links that are getting all those styles applied.

This selector will also work .contact-info li a. It is just being more specific than the one that is being used.

George S-T
George S-T
6,624 Points
George S-T
George S-T
6,624 Points

Using just 'li' would get the same result in your case however what if you had two lists on your page and you only wanted to style one of them? In that case you could specify which list my using the class that it's under.

Tom Lawrence
Tom Lawrence
8,685 Points
Tom Lawrence
Tom Lawrence
8,685 Points

true, so does CSS .contact-info li {} not select only list items within the unordered list with a class called contact-info? I thought it would but it didnt work when i tried.