Distinguishing Asterisks and Dashes For CSS List Formatting

[SixSeasons]

I am trying to format my bulleted lists differently, depending on whether they start with dashes "- " or asterisks "* ".

Use case: it would be useful to differentiate bullets at the same level.

• This bullet, starting with a dash, could be basic formatting…
• But THIS one, starting with an asterisk, could essentially have different formatting to differentiate different notes.

I have been unable to find any documentation on how to write CSS code that differentiates these uses. Does anyone have any wisdom?

[DiCaver]

Oh, I shouldn’t read this one before going to bed! …

I had never used " * " for the bulletin before, so this was the first time. At first, I didn’t see any difference in how HTML is rendered. This is my list (sorry, already with applied style)

first list has " - " and second " * " … and are seen as I put the cursor next to it

The only difference that I notice is in this!

" - " have 22px, and " * " have 23px … (I hope that this is not just locally in my Obsidian!)

So, based on this, I come to this CSS snippet:

div[style*="text-indent: -22px"][style*="padding-inline-start: 22px"] {
    color: red;
}

div[style*="text-indent: -23px"][style*="padding-inline-start: 23px"] {
    color: green
}

I hope it helps you to go in the direction that you want. I haven’t tested it to see if this “breaks” anything else.

Cheers, Marko

P.S.
Now (15 min later) I found out, that this works only in Editing mode

[SixSeasons]

Thanks for the detailed reply (and before bedtime!).

I did try the CSS snippet, but didn’t notice any difference in my bullets’ colors.

So I went to the console to compare our elements, but I couldn’t find find “text-indent” or “padding-inline-start” in my Console/Elements/Styles… I’ll post what shows up, if that’s any help:

(with mods disabled, there still isn’t any “text-indent” or “padding-inline-start”).

Those elements ARE in Console/Elements, right? Sorry–I looked for a while and read some CSS docs but I’m a novice…

[SixSeasons]

UPDATE: I discovered text-indent and padding-inline…and it works!

I was able to apply your solution…but the indent pixels does change depending on the zoom level. As someone who zooms a lot while working, do you think there’s a solution that won’t vary with zooms? I can create instances for most zoom levels, but I’m curious if there’s a more convenient workaround.

[DiCaver]

@SixSeasons

the indent pixels does change depending on the zoom level

I will look into this later in the day. Can’t promise anything, except that I will try

Cheers, Marko

[DiCaver]

@SixSeasons

I can create instances for most zoom levels, but I’m curious if there’s a more convenient workaround.

As CSS doesn’t work with dynamic calculations, I’m afraid that the only solution is to make “hundred” of indent levels

The easy part is that each indent is bigger by exactly 36px. So, to achieve this:

… I’ve added those (five) zoom levels:

div[style*="text-indent: -22px"][style*="padding-inline-start: 22px"],
div[style*="text-indent: -58px"][style*="padding-inline-start: 58px"],
div[style*="text-indent: -94px"][style*="padding-inline-start: 94px"],
div[style*="text-indent: -130px"][style*="padding-inline-start: 130px"],
div[style*="text-indent: -166px"][style*="padding-inline-start: 166px"] {
  color: red;
}

It’s not what we’re looking for, but it’s working. One solution would be to use SCSS, but Obsidian snippets support only CSS (the way they’re handled, I guess it’s the only way).

Just in case, SCSS code block …

$max-levels: 10; // Adjust based on how many levels you expect
$base-indent-1: -22px;
$base-padding-1: 22px;
$base-indent-2: -23px;
$base-padding-2: 23px;
$increment: 36px;

@for $i from 0 through $max-levels {
  div[style*="text-indent: #{$base-indent-1 + (-$i * $increment)}px"]
    [style*="padding-inline-start: #{$base-padding-1 + ($i * $increment)}px"] {
    color: red;
  }

  div[style*="text-indent: #{$base-indent-2 + (-$i * $increment)}px"]
    [style*="padding-inline-start: #{$base-padding-2 + ($i * $increment)}px"] {
    color: green;
  }
}

This needs to be compiled from SCSS into CSS using a tool like Sass.

sass input.scss output.css

Cheers, Marko

[SixSeasons]

I’ll proceed with this. At the end of the day, it works, eh?

Cheers and thanks for swooping down from the CSS heavens