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

rachelweaver
15,876 Pointslist-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?
7 Answers

Wayne Priestley
19,579 PointsHi 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.

Christian Lawrence
3,941 PointsThe 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.

Wayne Priestley
19,579 PointsHi Rachel,
If you move your font styling css so it comes directly after your @import you should be good.
Hope this helps.

Ashley Mullins
12,544 PointsThere 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.

Ashley Mullins
12,544 PointsI 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.

Christian Lawrence
3,941 PointsCorrect 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.
:)

rachelweaver
15,876 PointsThanks for all the answers!

rachelweaver
15,876 PointsThanks for all the answers!
rachelweaver
15,876 Pointsrachelweaver
15,876 PointsThanks 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