Even when you style a simple thing as lists in CSS, when styling nested lists & sublists the only unfortunate way to do it is with ul li / ul ul li / ul ul ul li, etc.
So, to translate that into Obsidian folders/subfolders, here’s the only pretty & clean way I could come up with for 6-level nesting using the new CSS nesting & feature (because your way of doing it the old-fashioned CSS style would have created ginormous-length selectors):
/* top-level */
.nav-folder-children > .nav-folder {
& > .nav-folder-title { color: maroon; }
/* level 1 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: red }
/* level 2 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: blue }
/* level 3 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: green }
/* level 4 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: magenta }
/* level 5 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: orange }
/* level 6 children */
& > .nav-folder-children > .nav-folder {
& > .nav-folder-title { color: black }
}
}
}
}
}
}
}
The result:
P.S. I know this is not a best practice but rather a bad practice when it comes to the new & nesting feature in CSS, which recommends at most 1-2 nesting levels, but hey - it achieves something that isn’t possible with CSS YET (hopefully they’ll add some :nth-nested(level) selector soon)