Numbered list auto-increment

Hello,
I am trying to achieve the following thing with lists:
I would like to be able to auto-increment the numbered list like this

  1. item1
    1.1 item1.1
    1.2 item1.2
  2. item2
    2.1 item2.1
    2.1.1 item2.1.1
    2.2 item2.2
    etc…

From what I read this is not yet implemented in obsidian, but maybe i don’t understand how to.

What i get is the following

  1. item1
    1. item1.1
    2. item1.2
  2. item2
    1. item2.1
      1.item2.1.1

which looks confusing
Is there a trick for that?

Thanks

1 Like

I wanted to do something similar some time ago.

With CSS this isn’t achievable. I don’t know whether it would be possible with a plugin, perhaps you could ask on the discord in the plugins channel.
It is actually achievable with CSS. Thank you, @Erisred.

These are all the styles which are supported with CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

1 Like

Thanks for confirming what I was thinking. I will try on the discord channel to see if a genius developer can build a plugin :slight_smile:

1 Like

This is possible. Here’s one way I found with a quick internet search - slightly modified - I pulled out all styling from the linked post, along with some stuff that was affecting bullets:

/* hierarchical ordering:  */
ol {
	counter-reset: item
}
ol li {
  display: block
}
ol li:before {
  content: counters(item, ".") ". ";
  counter-increment: item
}
section > ol li::before {
	position: relative;
}

It leaves lists with pure bullets alone, but is messy with lists that have both. If you by chance need that I’m sure some deeper searching will show an answer somewhere!

Here’s what I get using the above (in case it isn’t clear, editor on top, preview on bottom)

4 Likes

Thank you for rectifying this.

Hi,
This works well.
It is only missing the option to start numbering from a specific value
But I think the css can not guess that I am continuing the list

@roms - Yes, if you take advantage of the auto-numbering Obsidian provides, things get broken once you get into the sub-items - with this simple code, anyways. Since the first level works here (1., 2., 3. etc), I’m sure this could be modified to accept the generated numbers at each level. Maybe if I get time later I could take a stab at it…

What file did you modify to get this to work?

1 Like

This isn’t a modified file, but a snippet. There are numerous posts in the forum about adding those, but here’s a quick answer:

Outside the vault, navigate to the vault folder, and find the .obsidian folder - inside that should be a folder called snippets - if not, make one, and put a new file in there, named something like lists.css (the .css is critical, the name is not). Inside that .css file, place the above code. Lastly, activate it in the appearance section of your vault.

That’s the nickel tour - again, there are loads of posts on how to use snippets, but feel free to reach out if you still have questions.
Good luck!

2 Likes

Hi! I was wondering if you had any idea why this solution wouldn’t be working for me, I’m currently using the Things Theme and have added the code as you typed it, into its own snippet file but I can’t see to get it to work

got it to work! thank you so muchhh

1 Like