CSS for different tags in properties

[Esran]

What I’m trying to do

I use a CSS snippet to give certain tags different colours (example for ‘#Mathematics’ & its subtags below).

.tag[href^="#Mathematics"] {
    background-color: color-mix(in srgb, var(--custom-red) 25%, transparent);
    border-color:     color-mix(in srgb, var(--custom-red) 50%, transparent);
    color: var(--tx1);
}
.tag[href^="#Mathematics"]:hover {
    background-color: color-mix(in srgb, var(--custom-red) 50%, transparent);
    border-color:     color-mix(in srgb, var(--custom-red) 75%, transparent);
    color: var(--tx1);
}

This previously also worked for the YAML metadata field, since the tags were displayed as normal .tag elements:

However, the ‘tags’ property is now of the form .multi-select-pill-contents > span, which doesn’t have an href to specify the individual tag, and so my CSS no longer works there:

From some Googling, it seems there’s no way for CSS to check the contents of the span, which means it essentially can’t distinguish between tags in the properties field. I’m no expert in CSS though, so I thought I’d ask here if there’s some workaround I’ve missed.

Note: I use the ‘source’ option for the metadata display in Live Preview, so this only concerns Reading Mode.

Things I have tried

I searched for similar questions in the forum but wasn’t able to find anything (though I’m new here, so might’ve missed something). I saw some questions about “styling based on text” being answered with the Dynamic Highlights plugin, but it currently doesn’t support Reading Mode, only Source Mode / Live Preview.

While searching for “CSS style based on contents of span” and similar things online, I read that XPath and JQuery are able to read the contents of the span, but I wasn’t sure if it was possible to implement those given that the snippets for Obsidian are specifically CSS snippets.

[ariehen]

As of now, the only way that I know of to style “tags” in the Properties view are all the values of one Property type. (Towards the end of Properties view CSS - The Fall Collection). A rough example:

.metadata-property[data-property-key="aliases"] .multi-select-pill { 
    background: green; 
    color: yellow; 
}

.metadata-property[data-property-key="tags"] .multi-select-pill { 
    background: orange; 
    color: blue; 
}

[Anwen]

This is similar to my feature request:

Identifier for each tag in the properties, to apply css

Use case or problem When I see a note, I really like being able to see at first glance which categories it belongs to. This is easier with colors and emojis. So, I like to have visual tags, with a color specific to each one. Before updating the properties, I could apply these colors in the note metadata. With css look like this: .tag[href="#cours"] { font-size: 0; padding: 0; } .tag[href="#cours"]:after { font-size: 9.5pt; font-weight: 700; background-color: rgba(128, 125, 124, 0.39…

[Esran]

Thanks for the reply, I’m glad to have confirmed that I’ve not missed anything. I’ll just take the tags out of the ‘properties’ block for now and hope a future update adds the distinguishability back in.

[directive.athena]

Hey, I’m working on my published Plugin for obsidian which adds specific colors to tags. One of the latest updates I made (before christmas) was the addition of colored tags in the properties.
The way I solved it was with JQuery. I’ll leave a permalink to the file with the code that dealt with this: https://github.com/code-of-chaos/obsidian-colored_tags_wrangler/blob/6f84438ecb12f561b0359e4f3d4a67093a545795/src/plugin/event_handlers/FileOpen.ts

The plugin is Colored Tags Wrangler for anyone who wants to test the plugin out.