Apply color to nested tags with custom css

I searched already this forum, the internet and even tried AI with no luck. So this is my last chance.

I use nested tags, e.g. to tag people #p/<random-name> or teams #t/<random-team>

I want to give both of them different colors. For obvious reasons I can not just select the “t” and “p” with my custom css, they are way to generic and would than also catch tags like “test”, “project”,…

I inspected the HTML code with the dev tools. This is how such a tag looks like

<span class="cm-hashtag cm-hashtag-end cm-meta cm-tag-pJohnDoe" spellcheck="false">p/JohnDoe</span>

as you can see, the “/” is completely removed from the class. This left me with no idea how to select all #p/* tags with custom css.

Any idea how to solve it?

Did you check the colored tags plugin? Best case it already solves your question. Worst-case you have to look into their code/ get in touch for ideas.