How to customize ordered list using CSS?

Custom CSS & Theme Design
,
1

Hello,

I use a hierarchical note taking system, which means that I mainly depend on using numbered lists to write down certain ideas and depict their hierarchy by nesting sub-ideas under the main idea. That’s why I used to depend on Google Docs because you can customize the bullets however you want.

I would like to customize my ordered list in Obsidian so that depending on the level in the list, a different character would be used to represent that level of bullets.

For example, instead of:

  1. Text level 1
  2. Text level 2
    1. Text level 3

I would like my list to look like this:

  1. Text level 1
    a. Text level 2
    i. Text level 3 (Romanian numbers).

Is it possible? If yes, then could anybody guide me in this process?

Thanks in advance for any answer!

Greetings,
Jacob

4 Likes
2

I looked into this for for a few hours last weekend and figured I’d share.

It’s easy enough to do in preview mode because you can target the HTML “ol” and “ul” tags that stand for automated (ordered and unordered) lists, so the heavy lifting is done already.

Screenshot
Screenshot956×911 100 KB

/* Changes ordered list style when nested under ordered lists (preview mode only). */
/* "list-style-type" values (e.g. "i., ii."; "a., b." etc.) can be changed. See e.g. https://www.w3schools.com/cssref/pr_list-style-type.asp (scroll down) for a list of possible signs.*/

/* decimal = "1., 2.", lower-latin = "a., b.", lower-roman = "i., ii." */
	ol
{ list-style-type: decimal; }
	ol ol
{ list-style-type: lower-latin; }
	ol ol ol
{ list-style-type: lower-roman; } 

/* Restarts count when nested in between one unordered list. */
	ul ol ul ol
{ list-style-type: decimal; }
	ul ol ul ol ol
{ list-style-type: lower-latin; }
	ul ol ul ol ol ol
{ list-style-type: lower-roman; }

Edit mode is a different story, I couldn’t come up with a workable solution, maybe it’s not possible or more likely my limited experience with CSS ist not enough.
Anyway, a much better solution for nested lists than CSS would to add “a.” and other signs that HTML allows to Obsidian flavored Markdown or even better a plugin (if that’s possible).

===

Technical explanation of what didn’t work: You could technically make the 1., 2. etc. invisible and then inject text like a., b. etc. However I couldn’t come up with a way to select the ascending list entries separately, the numbering would end up as “a., a., a.” instead of “a., b., c.”. This is because there are so many wrapper “span” tags in between, so I couldn’t make the “nth-of-child”-selector work. It’s also super janky in general, the cursor is in the wrong place, the alignment is off, the injected text gets pushed by the hidden text or something… Anyway, here is how far I got selecting the second level nested lists (one indent under a numbered list).

span.cm-formatting-list-ol.cm-list-2
{
	color: transparent;
}
span.cm-formatting-list-ol.cm-list-2::after
{
	content: "a. ";
	color: black;
}
9 Likes
3

Aww man, thank you so much. I thought nobody would give an answer…but there you come with a great solution. I will implement it (I hope I don’t break anything, I don’t have any CSS skills) as I’ve been using Obsidian daily for 3 months now - this feature will be immensely helpful to make my notes more transparent. Thanks a lot!

3 Likes
4

Maybe someone could use some of the hacks here

2 Likes