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>
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With