Style only first level of unordered list

Question

I have a list like so:

    <ul id="main">
        <li>January
            <ul>
                <li>test</li>
                <li>test2</li>
            </ul>
        </li>

        <li>February
            <ul>
                <li>test</li>
                <li>test2</li>
            </ul>
        </li>
    </ul>

I would like to affect only the first level of li's - I thought this css would do the trick, but it appears to be not working correctly.

#main > li {
cursor: pointer;
list-style-image: url('plus_sign.gif');
}

The child lists still have a plus symbol next to them ... what would I be doing wrong?

Sure you don't have another rule somewhere? http://jsfiddle.net/YA2yx/ — Andrew Whitaker, Nov 19 '12 at 03:14
Almost positive I don't have another rule...when I paste your jsfiddle into my html file and display it locally, it shows up with the cats on every li. — joshft91, Nov 19 '12 at 03:17
(Sorry about the cats). If you inspect the elements in your favorite browser tools, it should show you what CSS rule is being applied. — Andrew Whitaker, Nov 19 '12 at 03:19
Looks like the rule is being applied to all li elements. No idea what would be causing that. — joshft91, Nov 19 '12 at 03:27

score 1 · Answer 1 · edited Nov 19 '12 at 17:11

1

This should work:

  #main  li {
    list-style-image: none;
  }    
  #main > li {
    cursor: pointer;
    list-style-image: url('plus_sign.gif');
  }

list-style-image is an inheritable property so it takes the value from its parent.

edited Nov 19 '12 at 17:11

BoltClock

700,868
160
1,392
1,356

answered Nov 19 '12 at 03:19

c-smile

26,734
7
59
86

After copying and pasting your css in, it puts them all back to their default list bullets. the solid bullet and then the hallow. – joshft91 Nov 19 '12 at 03:22
@oshft91 Change "plus.png" to "plus_sign.gif" – c-smile Nov 19 '12 at 03:29
Yeah, I caught that - no go. Going to try and start a complete new .html and .css file. – joshft91 Nov 19 '12 at 03:31
+1 for being the only one to explain that it's an inheritable property. – BoltClock Nov 19 '12 at 17:11

score 1 · Accepted Answer · answered Nov 19 '12 at 03:43

1

You can try this css, it looks like what you want.

#main{
    cursor:pointer;
    list-style-image:url('http://www.w3schools.com/cssref/sqpurple.gif');
}
#main ul{
    /*If you don't want the hallow circles*/
    list-style:none;
    /*if you want the hollow cirles, remove list-style and uncomment list-style-image:none
     list-style-image:none;
    */
}

It will display the plus_sign.gif(sqpurple.gif in this case) only on January and February. See Fiddle

answered Nov 19 '12 at 03:43

Fee

243
1
9

Thanks for the answer. I'm starting to wonder if there's something going on that in my environment because I've typed character for character and still nothing. Frustrating. – joshft91 Nov 19 '12 at 03:47
Maybe you should try it in a new file, just these rules alone or even something simpler to try and find the source of your problem. Hope it works out for you in the end. – Fee Nov 19 '12 at 03:53

hyleaus · Answer 3 · 2012-11-19T03:27:44.523

0

add another rule to deal with all other cases of li's:

ul > li{
    color: red;
    /*specifically*/
    list-style-image: none;
}

Give the css a default so your specific case will be an exception.

edited Nov 19 '12 at 03:27

answered Nov 19 '12 at 03:16

hyleaus

755
1
8
21

score 0 · Answer 4 · answered Nov 19 '12 at 03:49

Create another style and modify the ul to utilize the class:

.main > li {
cursor: pointer;
list-style-image: url('imageurl');
}
.main > li > ul > li {
cursor: auto;
list-style-image: none;
}

<ul class="main">
    <li>January
        <ul>
            <li> test</li>
            <li>test2</li>
        </ul>
    </li>

    <li>February
        <ul>
            <li>test</li>
            <li>test2</li>
        </ul>
    </li>
</ul>

Style only first level of unordered list

4 Answers4

Linked