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:

1. put classes on every ul and li, and use #my_nested_list ul.firstlevel li.firstlevel
2. 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?

Answer 1

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>

Answer 2

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.