How can I specify the color of a specific tag using CSS

Basement
1

What I’m trying to do

I’d like to color specific tags. For instance, I like #literature_note to be colored green wherever present in my notes.
How can I target a specific texts (or tag in my case) and change its color wherever present in the files.

Since this requires a conditional statement, is it possible to do this only with CSS?

Thanks in advance

1 Like
2

Hey essi,

You can do that using the [attribute] selector in CSS.
The ‘href’ attribute for a tag is the tag itself, e.g:

<a href="#Question" class="tag" target="_blank" rel="noopener">#Question</a>

So we can target the #Question tag using

.tag[href="#Question"] {
  color: green !important;
}

The above works for me, you can just swap out the ‘href’ part with your own tag :slight_smile:

5 Likes
3

I’ve been looking to solve exactly this problem! Thanks for posting…

4

wow this is cool @Crow !!

can this be also done for attributes in a FM yaml header? ie status: 3 in red status:4 in green etc?

5

i guess my immediate greedy follow up question is can we somehow color the actual note entry in the file explorer with the same color ?

image

so the onion burger note entry FG/BG would be green as well?

thx so much Z

7

Yes! See my post here: Fancy Frontmatter Tags

8

Yes!

My post “Add Emojis to folder titles in explorer without renaming folders” shows how to do this with folders.

To select an individual file in the file explorer window, the css selector would be div[data-path="Path/to/file.md"] .nav-file-title-content.

So for instance, div[data-path="Notes/Spec.md"] .nav-file-title-content selects the note called “Spec” in my “Notes” folder in the file explorer.

I hope this helps!

9

Thanks a lot. It works smoothly!

1 Like
10

thats fantastic @ScottKillen !

thx so much. is there anyway to color based on a yaml attribute though?

following your excellent link it seems this add the icon to a specific file? as where i aim at having multiple files get colored based on the yaml attribute

im a neewb and not very techical so sorry for the silly questions

best

Z

11

Not to my knowledge.

I think it would require a plugin to add css classes to the file explorer based on yaml properties. As it is, Obsidian.md itself only supports a few yaml fields.

12

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