List indent text background colour change auto

Help
1

Hi Friends,

I want to differentiate list by text background colours automatically when I indent.

I coded an html list to explain my expectation.

<!<!DOCTYPE HTML>
    <html>
        <head>
            <style>
                li {
                    margin-bottom: 1px;
                }
                .a {
                    background-color: tomato;
                    padding: 0px 5px;
                    border-radius: 2px;
                }
                .b {
                    background-color: orange;
                    padding: 0px 5px;
                    border-radius: 2px;
                }
                .c {
                    background-color: green;
                    padding: 0px 5px;
                    border-radius: 2px;
                }
            </style>
        </head>
        <body>
            <ul>
                <li><span class="a">test</span></li>
                <ul>
                    <li><span class="b">test</span></li>
                    <ul>
                        <li><span class="c">test</span></li>
                        <li><span class="c">test</span></li>
                    </ul>
                    <li><span class="b">test</span></li>
                </ul>
                <li><span class="a">test</span></li>
            </ul>
        </body>
    </html>

Eventhough I labeled them manually I want it to be automatic change colours not only for first three but to any extent.

I want a css snippet code for my obsidian to get it.

Thanks in advance

2

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.