CODEWITHSUNDEEP
css
public static
public static

Reputation: 13000

CSS list-style: none; still shows bullet

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

Upvotes: 3

Views: 12897

Answers (6)

Josti
Josti

Reputation: 63

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;
}

Upvotes: 2

Dan
Dan

Reputation: 63460

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

ul li{ list-style: disc outside; }

This 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.

Upvotes: 2

vaske
vaske

Reputation: 9552

Use this one:

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

or 

.links li {
    list-style: none;
}

it should work...

Upvotes: 0

Prestaul
Prestaul

Reputation: 85224

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;
}

Upvotes: 9

unexist
unexist

Reputation: 2528

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?

Upvotes: 0

Matt
Matt

Reputation: 935

shouldn't it be:

#nav ul.links

Upvotes: 1

Related Questions