When Creating a CSS Snippet to modify ObsidianMD's bullet list's bullets, why does the class '.cm-list-4' work?

[psj.dev]

Can someone explain to me why when modifying the style of bullet lists, you can only go three levels deep using .cm-list-n where n is level?

The following doesn’t work:

.cm-list-4 .list-bullet:before {
    content: '\25AA';
}

This, however does:

.HyperMD-list-line-4 .list-bullet:before {
    content: '\2024';
}

I’m still relatively novice in CSS styling. Using the Developer tools, I see that at the fourth level it cycles back to using ‘.cm-list-1’ – is this an inherent mechanic of how Obsidian creates the lists?

CSS Inspection View of Fourth Level Bullet

Is .HyperMD-list-line a parent of .cm-list-n and has precedence such that .HyperMD-list-line-4 overrides .cm-list-1 at the fourth level or something along those lines?

I attempted to dissect the source CSS and app.css to understand better how ObsidianMD applies styling but I’m still novice at CSS so my understanding is a bit shaky.

[Olondre]

	.HyperMD-list-line.HyperMD-list-line-4.cm-line > .cm-list-1 {
		--list-marker-color: #000;
	}

This is what I use for levels deeper than 3. I don’t know why you can only use .cm-list-1 to .cm-list-3 and then have to use this method, but it works .

--list-marker-color: is one of many new selectors that the Obsidian Team added recently. You can find those for a lot of things at the top of the app.css. There are also selectors for bullet-border, bullet-radius, etc.

If you, as an example, only want to change the color for all levels of list-bullets to be the same, you could just use a snippet like this:

body {
--list-marker-color: #000;
}

[psj.dev]

This is great to know – I’ll have to go explore the app.css with a more fine tooth comb to look at what other selectors I have access to!