JSFiddle - React, Tailwind, and code Playground

by alnitak

HTML

<ul>
     <li>item 1</li>
     <li>item 2
         <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
                <ul>
                   <li>sub-subitem1</li>
                </ul>
            </li>
         </ul>
    </li>
    <li>item 3
        <ul class>
            <li>subitem 1</li>
        </ul>
    </li> 
</ul>

CSS

.level-0 {
    font-weight: bold;
}

.level-1 {
    font-style: italic;
}

.level-2 {
    color: #808080;
}

JavaScript

$("ul").each(function() {
    var depth = $(this).parents('ul').length;
    $(this).addClass('level-' + depth);
});