Reset HTML List Depth To Root Level (for bullets)

Question

As an example, I would like to set level 4 of the list in this fiddle (code below) to the root level. This would mean the bullets for level 4 would look like level 1, level 5 would look like level 2 and level 6 would look like level 3. This would need to happen without manually overriding the bullets per item because different browsers have different bullet styles.

<ul>
    <li>level 1 item</li>
    <li>level 1 item
        <ul>
            <li>level 2 item</li>
            <li>level 2 item
                <ul>
                    <li>level 3 item</li>
                    <li>level 3 item
                        <ul>
                            <li>level 4 item</li>
                            <li>level 4 item
                                <ul>
                                    <li>level 5 item</li>
                                    <li>level 5 item
                                        <ul>
                                            <li>level 6 item</li>
                                            <li>level 6 item</li>
                                            <li>level 6 item</li>
                                        </ul>
                                    </li>
                                    <li>level 5 item</li>
                                </ul>
                            </li>
                            <li>level 4 item</li>
                        </ul>
                    </li>
                    <li>level 3 item</li>
                </ul>
            </li>
            <li>level 2 item</li>
        </ul>
    </li>
    <li>level 1 item</li>
</ul>

Footgear

There is no way (AFAIK) to "re-start" the multi-level styling. You can set the 4th level to list-style:initial but this will affect all nested ul as well - jsfiddle.net/83tbzu2j/2 Of course, if you can figure out a way to not affect the deeper levels you may have something....but I don't think so. You might be better off with CSS Counters. – Kinny

@Kinny list-style: initial doesn't appear to do anything in Chrome in relation to bullet styles. – Footgear

Did in my version. It switches from a square bullet to a round one. – Kinny

We need a :nth-nested-child selector. That would be awesome! :) But I think Paulie_D is right. There is no CSS way to do this. If you want, I give you a jQuery solution. – Isabeau

@Kinny I see, was on a machine earlier with lower resolution and thought they were the same. – Footgear

@Isabeau I'm trying really hard to avoid any JS in this. – Footgear

Answer 1

It seems all browsers go disc-circle-square so I managed to get this with a bit of CSS and a class (applies automatically to <ul> elements inside an <ol> element but not otherwise.) Fiddle here and CSS below:

ol > li > ul > li > ul > li > ul {
    list-style-type: square;
}
ul.initial > li > ul > li > ul {
    list-style-type: square;
}
ol > li > ul > li > ul {
    list-style-type: circle;
}
ul.initial > li > ul {
    list-style-type: circle;
}
ol > li > ul {
    list-style: initial;
}
ul.initial {
    list-style: initial;
}

Footgear