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 Nathan Magyar
Nathan Magyar
11,332 Points

Font-error message

I'm trying to select an unordered list within the class "contact-info" and set the font size to 0.9em, as well as remove all the margins, padding and list-styling. It says I'm not setting the font to the correctly. What am I missing? Thanks!

.contact-info ul {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}
Jacobus Hindson
Jacobus Hindson
14,429 Points

I copy and paste your code into a work space with a really basic HTML page and it works just fine. Check your last reference on your htlm and ensure that it is set correctly.

My example:

<DOCTYPE! html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>  
<div class="contact-info">
  <ul>
  Test here
    <li>
    test here
    </li>
  </ul>
  </div>
</body>

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

1 Answer

mikes02
PLUS
mikes02
Courses Plus Student 16,968 Points
mikes02
mikes02
Courses Plus Student 16,968 Points

Hi Nathan,

The problem is that you are selecting 

.contact-info ul

However, the challenge is asking you to select a UL with the class contact-info, so what would you have to do to your CSS to make that apply? Think it through and if you need additional help post back. You are very close, though.

Also, I modified your original post to format the CSS. If you need help posting code in the future refer to the Markdown Cheatsheet while posting.

Nathan Magyar
Nathan Magyar
11,332 Points

Hi Mike,

I used an attribute selector and it worked:

ul[class="contact-info"] {
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

But I still don't understand what was wrong with my original attempt. Can you please clarify the difference between the attribute selector and the regular class selector/descendant option? The video tutorial recommended avoiding attribute selectors for the most part because they make the browser do more work, so I expected the answer to be the latter rather than the former. Thanks for your help!

mikes02
mikes02
Courses Plus Student 16,968 Points

Nathan,

Glad that worked, but it could also be simply:

ul.contact-info

That is a UL element with the class contact-info applied, no need for an attribute selector in this case, although it works. Your original attempt was not looking for a UL with a class .contact-info, it was actually looking for any ULs that were a child of an element with the .contact-info class. So if you had:

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

Your original code would work in this case, because the UL is within a DIV with the .contact-info class, but as mentioned the challenge was looking for a UL with that class applied. Make sense?

Nathan Magyar
Nathan Magyar
11,332 Points

Ah ok, thanks! Got it!

mikes02
mikes02
Courses Plus Student 16,968 Points

Glad that worked for you and that it helped, Nathan. If you are satisfied with the answer provided we encourage you to select it as the Best Answer, this helps other forum members who may be facing the same issue know that they can find an answer to their question within this post.