Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points

challenge task - anchor elements inside unordered list with class contact-list

I can't get this challenge task right. Here's my wrong answer:

.contact-info a { display: block; font-size: 0.9em; margin: 0; padding: 0; list-style: none; }

This is exactly what I have on my project website, which is likely why it isn't displaying correctly...

css/main.css
a {
  text-decoration: none;
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
}

#logo {
  text-align: center;
  margin: 0;
}

h1, h2 {
  color: #fff;
}

nav a {
  color: #fff;
}

nav a:hover {
  color: #32673f;
}

h1 {
  font-family: Changa One, sans-serif;
  font-size: 1.75em;
  font-weight: normal;
}

img {
  max-width: 100%;
}

#gallery {
  margin: 0;
  padding: 0;
  list-style: none;
}

#gallery li {
  float: left;
  width: 45%;
  margin: 2.5%;
  background-color: #f5f5f5;
  color: #bdc3c7;
}

nav ul {
  list-style: none;
  margin: 0 10px;
  padding: 0;
}

nav li {
  display: inline-block;
}

nav a {
  font-weight: 800;
  padding: 15px 10px;
}

.profile-photo {
  display: block;
  margin: 0 auto 30px;
  max-width: 150px;
  border-radius: 100%;
}

.contact-info ul a {
  display: block;
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

3 Answers

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,202 Points

Hi Anna,

You're very close. try only targeting just the class.

Remember the challenge is to: select the unordered list with the class contact-info

Also remember selectors work in reverse: .contact-info ul a {…} --> selects/applies the class attributes to an <a> anchor inside a <ul> unordered list inside a parent object with the class .contact-info, thus only selecting/styling anchor tags (see example below):

<div class="contact-info">
    <ul>
        <li>
            <a>your link</a>
        </li>
    </ul>
</div>
Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points

Thank you! But I still don't get it. :( The challenge question, or the project.

I watched the video again, but that didn't help. My project code looks exactly like his project code (I've checked countless times), but it doesn't work - on the challenge, or on my site.

Here's my code for the project:

/************************** PAGE: CONTACT **************************/

.contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

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

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

On my site, it looks like this:

Contact Details

class="phone"> 559-978-4250 class="mail"> ynotanna@hotmail.com class="twitter"> @ynot_anna

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,202 Points

Hi Anna,

No worries, this use to get me confused too: your CSS code is targeting the wrong order of elements The <ul> has the class of .contact-info, so to properly target it you would write your code like below:

ul.contact-info {}

You also need to remove the <a> from your code as it specifies to only target (and apply your style attributes) anchor tags, which won't apply to any other tags in your <ul>.

Read more about (specificity here)[https://developer.mozilla.org/en/docs/Web/CSS/Specificity].

Head scratch moments like these are the best teachers. You're doing great. Keep it up!!

Anna Parker
PLUS
Anna Parker
Courses Plus Student 4,399 Points

Thanks again! I got through the challenge, and realized that my project issue was coming from the html, not the css. Other than an extra Twitter bird flying around, everything seems fine now. :-)