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 Kristin Dean
Kristin Dean
6,086 Points

On this exercise it says to select the unordered list with the class contact-info. There is no unordered list

On this exercise (1/5) it says to select the unordered list with the class contact-info. There isn't already an ordered list with this class. I manually wrote:

.contact-info ul { font-size: 0.9em; }

I think this fulfills the requirement, but I can't get the exercise to score 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 {
  font-size: 0.9em;
}
Teron Bullock
Teron Bullock
Courses Plus Student 23,672 Points
Teron Bullock
Teron Bullock
Courses Plus Student 23,672 Points

Hello Kristin, Try this and see if it works. You want to select the unordered list then the Class. ul .contact-info { font-size: 0.9em; }

Good luck

2 Answers

Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer
Ryan Dudley
Ryan Dudley
Treehouse Project Reviewer

Hey Kristin, hope your day is going well thus far! Hopefully I can be of some help, and give some clarification on the challenge to get you on your way!

You are correct that there is no pre-existing rule for this challenge, but that is to be expected as it wants you to get some practice making your own selectors. The problem you are running into here is that you are structuring your selector incorrectly; I know this can be tricky sometimes, but the more you practice you will get the hang of it :)

In the code example above that you have provided, you are using a descendant selector which is causing the wrong element to be targeted by the CSS.

You are using .contact-info ul, which is saying to the browser that you want to select all unordered lists that are children of the .contact-info class. Just remember, when you add a space after a selector it signifies a descendant selector. In order to select all unordered lists that currently have the class applied to it you would rewrite the selector as so:

ul.contact-info {
  /* Styles go here */
}

Hopefully this was able to shed some light on the issue, and if you ever get confused about how to structure selectors in the future I would recommend taking a look at the MDN and checking out some of the code example there. Have a good day and happy coding!

Kristin Dean
Kristin Dean
6,086 Points

Thank you for your quick response.

Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points
Glenré Charl Labuschagné
Glenré Charl Labuschagné
23,204 Points

Hi Kristin,

Currently your CSS is target a unordered list within a parent element with the class .contact-info.

To write a selector for unordered list with the class, you need to place the ul before the .contact-info and then set the font size to 0.9em. Also remember to remove all margin, padding, and list styling as per the instruction.

ul.contact-info {}

You where very close, and remember we all had to learn this lesson

Kristin Dean
Kristin Dean
6,086 Points

Thank you for your quick response and your kind words!

Kristin Dean
Kristin Dean
6,086 Points

Thank you for your quick response.