CSS on nested list : avoid styling of both lists

Question

I have the folowing nested list structure:

HTML:

<div id="my_nested_list">
    <ul>
        <li>
            Item label
            <ul>
                <li>Subitem 1</li>
                <li>Subitem 2</li>
                <li>Subitem 3</li>
            </ul>
        <li>
        <li>...</li>      
   </ul>
</div>

CSS:

#my_nested_list>ul {
/* first level list */
}
#my_nested_list>ul>li {
/* first level items */
}
#my_nested_list>ul>li ul {
/* second level list */
}
#my_nested_list>ul>li ul>li {
/* second level items */
}

My problem is that with space selector instead of >, first level rules apply on the second level. But i need ie6 support, which does not support >. Thus i have to use space.

So far i have 2 solutions:

put classes on every ul and li, and use #my_nested_list ul.firstlevel li.firstlevel
use #my_nested_list ul li, and #my_nested_list ul li ul li to rewrite every unwanted first level rule.

Do you have better ideas?

That's pretty much it. You really don't have to invest too much effort in IE6, it's not worth it anymore. Whichever existing solutions work, I'd take them. — BoltClock
– BoltClock, Commented Aug 1, 2011 at 11:02
I agree with BoltClock, but i don't see any reason for using the > child operator here - just stick to spaces? — xec
– xec, Commented Aug 1, 2011 at 11:12
@xec: "with space selector instead of >, first level rules apply on the second level" And he says he doesn't want that. — BoltClock
– BoltClock, Commented Aug 1, 2011 at 11:13
I would make 2 classes .list li and .nestedlist li and just give the ul tags the appropriate class. Override in nestedlist what you inherit from list and want differently. — Bazzz
– Bazzz, Commented Aug 1, 2011 at 11:15
@BoltClock but he's already overwriting for second level lists, so the > is unnecessary, just do "#my_nested_list ul li" for first level and "#my_nested_list ul ul li" for second (and third etc) level — xec
– xec, Commented Aug 1, 2011 at 11:20

Joonas · Accepted Answer · 2011-08-01 19:15:01Z

4

Ordering the css properly is the key word.

http://jsfiddle.net/wHztz/

CSS:

ul { background: red; }
ul ul { background: green }

ul li { background: yellow; margin: 10px;}
ul ul li { background: blue; }

HTML is the same as in your question, minus the div.

Edit: Damn i always end up realizing things after ive posted my answer.. Seems like you had this idea.

About putting classes to the list. You would only need to put classes to the ul's ( Nevermind.. it depends )

Edit2: If youd insist on using classes on each element but really dont care for adding them manually, you could do something like this: http://jsfiddle.net/wHztz/5/

This gives each ul a class in sequence: ulist1, ulist2, ulist3... depending on how many uls you have of course.

Edit3: changed the code a little.

http://jsfiddle.net/wHztz/6/ - Note that i didnt change anything in the CSS so CSS doesnt do a thing in this example.

jQuery:

   $("#my_nested_list > ul, ul ul").each(function (i) {
        i = i+1;
        $(this).addClass("list"+i).children().addClass("list"+i);
   });

This generates to:

<div id="my_nested_list">
    <ul class="list1">
        <li class="list1">
            Item label
            <ul class="list2">
                <li class="list2">Subitem 1</li>
                <li class="list2">Subitem 2</li>
                <li class="list2">Subitem 3</li>
            </ul>
        </li><li class="list1">
        </li><li class="list1">...</li>      
   </ul>          
</div>

You could easily target this like:

ul.list1 {}
li.list1 {}

ul.list2 {}
li.list2 {}

Note that you could change this part:

$(this).addClass("list"+i).children().addClass("list"+i);

into

$(this).addClass("ul"+i).children().addClass("li"+i);

and it would result to this.

<div id="my_nested_list">
    <ul class="ul1">
        <li class="li1">
            Item label
            <ul class="ul2">
                <li class="li2">Subitem 1</li>
                <li class="li2">Subitem 2</li>
                <li class="li2">Subitem 3</li>
            </ul>
        </li><li class="li1">
        </li><li class="li1">...</li>      
   </ul>          
</div>

edited Aug 1, 2011 at 19:15

answered Aug 1, 2011 at 11:51

Joonas

7,3259 gold badges43 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Benjamin Crouzier Over a year ago

The only problem with this method is that if i have, say, ul li { text-decoration: underline }, i cannot get rid of it in sublist. ul li ul li { text-decoration: none } does not work. (Assuming i want underline only in level 1 list)

Joonas Over a year ago

text-decoration: none; might be bit of an anomaly here.. Couldnt think of any other attributes / values that would fail like this. Though there might be other ones as well. You might want to try what i did in my edit2 ( You could do something like $("#my_nested_list > ul, li") to target them all. Im no expert in jquery though. )

Spudley · Accepted Answer · 2011-08-01 19:45:23Z

Your problem isn't the > selector, it's the need to support IE6.

My first advice would be to try to minimise your requirement to support this ancient browser -- even if you can't drop support entirely, accept the fact that it doesn't support some things you want to use, and that it'll look bad as a result. If it is still usable in IE6, then you've done the job, no matter how bad it looks.

This advice probably won't help in this specific case, because if you're styling nested lists, it probably means a menu structure which really needs to be styled differently between the two levels. But in general, don't sweat it too much for IE6; it's not worth the hassle.

If you really need to get some new-fangled CSS selector to work in IE6, I would recommend going the Javascript route. There are several good libraries out there which target older versions of IE, and hack in support for various features, including CSS selectors.

The two that spring to mind are:

Firstly the venerable IE7.js by Dean Edwards (and the follow-on scripts, IE8.js and IE9.js). This script has been around for ages, and adds a raft of features and bug fixes to various version of IE, but primarily IE6.
Secondly, you could try Selectivizr. This is a much newer script which focuses on adding missing CSS selectors to various versions of IE. Selectivzr works in conjunction with another library (it can use any one of several), so if you're already using a library such as JQuery or MooTools, this may be a good choice.

Both of the above will make IE6 recognise your > CSS selector (among others), and thus your stylesheets will work in IE6 without any need to rewrite them.

Obviously, both these solutions use Javascript to work, so if your IE6 user base is in the habit of switching off their Javascript then they'll end up with a broken site. It is for you to determine how serious an issue this is and how many people it will affect.

I hope that helps.

Didn't know about IE7.js. It even fixes png transparency issues in addition to selectors... This will change my life

Collectives™ on Stack Overflow

CSS on nested list : avoid styling of both lists

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related