Change header color *within* bullets?

What I’m trying to do

I want to change the color of headers within bullets.

  • This is what I want changed

Not this.

Things I have tried

I currently have a .css snippet that looks like the following:
.cm-header-2 { color: #ffabf4; }

This changes the color of my ## headings to pink, which is great, but I want to change the color of bulleted ## headings to pink as well.

Try the following CSS:

.HyperMD-list-line .cm-header-2,
.cm-header-2 {
  color: #ffabf4;
}

Your CSS got overridden by a CSS selector which was more specific, similar to the first line, so by adding the same selector (at the same level), we can get your color to push through.

Another option, slightly worse in many opinions, is to add !important after your color setting.

1 Like

I‘m curious. Is a header within lists valid Markdown?

HeHe… @harr , It’s not recognised by Obsidian as a header to be included in the headings metadataCache. It’s seems to be formatted kind of correct, but you’re in a grey zone as you start introducing block elements within inline elements (aka an <h2> within a <li> element) which is strictly speaking not following the HTML standards.

In short, I don’t recommend doing it, but I do see people wanting that visual effect. But Obsidian doesn’t recognise it as a header, as shown at the top in the thread below.

1 Like

Thanks, this worked perfectly! :slight_smile:

Headings in lists are valid Markdown. See: https://spec.commonmark.org/0.30/#example-300, but as holroy mentioned they aren’t picked up by Obsidian’s index so don’t show up in link suggestions, in the Outline, etc.

 - list item
      ## heading in list item
      - sublist item
        ### heading in sublist item
  • list item

    heading in list item

    • sublist item

      heading in sublist item

Obsidian:

Typora:

1 Like

If you (or anyone following along in the future) want to cover Reading view or rendered contexts as well, you could use the following:

/* heading color */
body {
    --h2-color: hotpink;
}

/* heading color in lists */
.HyperMD-list-line .cm-header-2,
.markdown-rendered li h2 {
    color: hotpink;
}

Thanks! I had overlooked ex 300. Do I understand correctly, that in Obsidian:

  • Headings in lists are formatted like other headings
  • They can be referenced like other blocks with [[#^
  • But they are not considered sections and can not be referenced as sections with [[#

I don’t use headings in lists, so don’t know all the edge cases.

That looks correct. I mentioned above, but I’d add to the list that they don’t show up in the Outline tab. Obsidian doesn’t consider them “real” headings.

I’ve not tested this, but you can’t use block links into the midst of a list, so it doesn’t seem natural that you could link to a list item with a heading either since the block is the entire list (if I’m not mistaken).

With a quick test:

Obsidian_A7NkREWm8H

Interesting. I learned that only the bullets are recognized as blocks, but not the headings. Here are a few more test cases:

- cat
	- ## mouse ^5a247d
		- dog ^ba4d47
	-  bear
		### dolphin ^6ca887
	-  shark

![[#^5a247d]]

![[#^ba4d47]]

![[#^6ca887]]

Reading view:

Obsidian’s behavior makes sense.

Well, it seems like I’m mistaken, as @ariehen proved, obsidian can link to a list item even though its not considered a block. Kind of strange, but I can live that.

I thought the same, and said the same in some discussion about the difference between Obsidian and Logseq. I had overlooked, that a list item is considered a block, according to Obsidian Help:

A block is a unit of text in your note, for example a paragraph, block quote, or even a list item.

Interesting how much confusion we all have about a feature that is standards compliant and documented.

1 Like