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

list-style-type not working properly

I built a project in codepen and the "list-style type" property is not removing the bullet points. I am using an imported google font. When the font is not included then the bullet points are removed. Can someone help me figure out what is going on?

http://codepen.io/rachel_weaver/pen/emYLyG/

7 Answers

Hi Rachel,

If you simply add #nav { list-style: none;} to the bottom of your css you will see everything works, so the problem with your code is not with the specificity but with the cascading of your CSS.

Thanks this really helps, I am a little shaky on the cascade so I can see how I messed up.

Here is the corrected code, do you know of any resources I can use to help improve my understanding of the cascade?

http://codepen.io/rachel_weaver/pen/emYLyG

The problem is you're adding it to a tag that isn't considered a list item. You should apply it to the li tag for it to work.

#nav li
{
   list-style-type: none;
}

Unusual that the font affected it, not really sure what that was.

Hi Rachel,

If you move your font styling css so it comes directly after your @import you should be good.

Hope this helps.

There was something wrong with your @import rule that was throwing the whole thing off. You were right to change the list-style-type to the ul itself. You don't do it on the individual list items.

If you set it to the individual list items, it WILL work, but if you experiment with both, you'll notice that if you add list-style-type to the li instead of the entire ul, you'll get some unwanted padding that's inherited from the browser.

Instead of using a ul with an id of "nav" you should use the html5 nav tags to make the code easier to read and more semantic. It works just the same, but using the nav tags is more a best practice.

HTML

<nav id="some_id">
     <ul>
          <a href="#index.html"><li>This will take you home</li></a>
          <a href="#somewhere_else.html"><li>This will take you somewhere else</li></a>
          <a href="#another_place.html"><li>This will take you to another place</li></a>
     </ul>
</nav>

CSS

nav#some_id ul{
       list-style-type:none;
}

Also, unless you are planning on doing something special to them, you don't need individual IDs on every single list item. They're all styled to look the same so the IDs are just creating unused code.

I seem to have formatted my code all funky lol.

<nav id="some_id">
      <ul>
           <a href="index.html"><li>This will take you home</li></a>
           <a href="somewhere_else.html"><li>This will take you somewhere else</li></a>
           <a href="another_place.html"><li>This will take you to another place</li></a>
      </ul>
</nav>
nav#some_id ul{
    list-style:none;
}

I've used just "list-style" here which does the same thing, it's just the shorthand version and you can style other parts of the list in the same line, if needed.

Correct me if I'm wrong but I don't think it's good practice to wrap your li in an a, it should go ul li a for semantic reasons.

Like so:

<ul>
           <li><a href="index.html">This will take you home</a></li>
</ul>

I think you're right that you can apply list-style to the UL. I was thinking perhaps not the nav tag or id=nav incase you have more than one list inside.

:)

Thanks for all the answers!

Thanks for all the answers!