Alternative bullet color for nested bullets

I want to have alternative colors of bullets as they are being nested.

I have been trying to use CSS snipped to achive this goal. Odd numbered nested bullets be black and even numbered nested bullets be brown.

Here is the code I have so far. But it does not seem to work for me in the live preview mode. Can anyone help me with this issue?

/* Black bullet point */
.markdown-preview-view ul > li::before,
.markdown-preview-view ol > li::before {
  content: "•";
  color: black;
}

/* Brown bullet point */
.markdown-preview-view ul > ul > li::before,
.markdown-preview-view ol > ol > li::before {
  content: "•";
  color: brown;
}

/* Alternate black and brown bullet points */
.markdown-preview-view ul > ul:nth-child(even) > li::before,
.markdown-preview-view ol > ol:nth-child(even) > li::before {
  content: "•";
  color: black;
}

.markdown-preview-view ul > ul:nth-child(odd) > li::before,
.markdown-preview-view ol > ol:nth-child(odd) > li::before {
  content: "•";
  color: brown;
}

I’m not sure how it applies to your case, but Obsidian seems to be using the marker thingy to mark the lists, see my post on multi-numbering.

So not sure how, but I do believe you need to change the syntax to be related to the ::marker syntax, to get it to work. But I might be mistaken, I’m not that confident when replying to CSS stuff, it’s still a bit of a grey area for me.

When looking a little more into this, it’s even more convoluted, and it seems like in the default theme, that it’s using list-style-type for doing the bullets and similar.

I strongly suggest for you to read the post below, and check out how the bullet points actually get their style, and then try changing that.

1 Like

From your CSS, .markdown-preview-view is for targeting reading mode (yeah, it’s confusing). For general targeting of Source + Live-Preview you want to be using .markdown-source-view or .markdown-source-view.mod-cm6 (see linked examples).

I’ve played around with using different shapes before in nested lists (think they look neat), but end up turning off the snippet after a while because I hit an edge case and things start looking strange. I don’t know exactly what is going on, but the bullets (or shapes) seem to be drawn on the fly. I do know that different themes, spaces instead of tabs, scrolling too fast, etc, will distort them. Default bullets for me.

As holroy said, it’s quite convoluted. In addition to their thread (above), I’ve looked at these two quite a few times:

This sort of works (with just a little distortion :open_mouth:):

ul>li> .list-bullet::after, .cm-list-1 .list-bullet::after {
  background-color: black;
}
ul>li> ul>li> .list-bullet::after, .cm-list-2 .list-bullet::after {
  background-color: brown;
}
ul>li> ul>li> ul>li> .list-bullet::after, .cm-list-3 .list-bullet::after {
  background-color: black;
}

Screenshot 2023-04-24 132314

EDIT: the odd shape, in this case, is caused by the font. I tried on a different machine with a different font, and the bullet circles are all the same shape.

2 Likes

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.