CSS list-style

Question

Hi,

I am using YUI reset/base, after the reset it sets the ul and li tags to list-style: disc outside;

My markup looks like this:

<div id="nav">
     <ul class="links">
         <li><a href="">Testing</a></li>
     </ul>

</div>

My CSS is:

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

Now that makes the small disc beside each li disappear.

Why doesn't this work though?

 #nav {}
 #nav ul.links 
 {
      list-style: none;
 }

It works if I remove the link to the base.css file, why?.

Updated: sidenav -> nav

Answer 1

shouldn't it be:

#nav ul.links

Answer 2

Maybe the style is the base.css overrides your styles with "!important"? Did you try to add a class to this specific li and make an own style for it?

Answer 3

In the first snippet you apply the list-style to the li element, in the second to the ul element.

Try

#nav ul.links li
{
  list-style: none;
}

Answer 4

The latter example probably doesn't work because of CSS Specificity (A more serious explanation). That is, YUI's base.css rule is:

ul li{ list-style: disc outside; }

Which is more 'specific' than yours, so the YUI rule is being used. As has been noted several times, you can make your rule more specific by targeting the li tags:

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

Hard to say for sure without looking at your code, but if you don't know about specificity it's certainly worth a read

Answer 5

Use this one: .nav ul li { list-style: none; }

or

.links li { list-style: none; }

it should works...

Answer 6

I think that Dan was close with his answer, but this isn't an issue of specificity. You can set the list-style on the list (the UL) but you can also override that list-style for individual list items (the LIs).

You are telling the browser to not use bullets on the list, but YUI tells the browser to use them on individual list items (YUI wins):

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links {
    list-style: none; /* doesn't override styles for LIs, just the UL */
}

What you want is to tell the browser not to use them on the list items:

ul li{ list-style: disc outside; } /* in YUI base.css */

#nav ul.links li {
    list-style: none;
}