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 and Style Icons

Posted by Ian Mcvey
Ian Mcvey
1,819 Points

confused

how come my answer

```css .

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

won't let me pass the quiz but the answer ```

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

lets me pass the quiz. I am pretty sure the quiz is telling me to change the font size of the un-ordered lists IN THE .contact-info CLASS so I think I should be able to pass the quiz with my original answer instead of the answer that had the " ul " removed from .contact-info { }

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 {
 font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

2 Answers

eduardomejia2
eduardomejia2
Courses Plus Student 22,237 Points

Hi! I read the question and actually the .contact-info class is selecting the ul tag, something like 

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

so if you add an ul selector you won't be able to find any ul nested inside the ul with .contact-info class assigned to it, in that scenario the html code might look like 

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

which does not makes a lot of sense.

Ian Mcvey
Ian Mcvey
1,819 Points

Oh yeah! That's right. Thanks

Mike Mitchell
PLUS
Mike Mitchell
Courses Plus Student 27,026 Points
Mike Mitchell
Mike Mitchell
Courses Plus Student 27,026 Points

Hey Ian, It does look confusing for sure. Eduardo said it though.

Your class selector .contact-info will style anything with that class. You could have a simple <p class=".contact-info"> and it would adopt whatever styling you've set up in .contact-info.

Since the <ul> has a class of .contact-info, that's all you need.

When you use a selector of .contact-info ul {}, it looks for an element with the .contact-info class that has a ul as part of it.

For example, if you had a div that looked like <div class=".contact-info> and then had a <ul> inside of that div.

.contact-info is very broad but since only the ul element has that class, it's the only thing that is styled.

Hope this helps.

Mike

Ian Mcvey
Ian Mcvey
1,819 Points

I understand now, Thanks.