How to select this exact element in CSS please? (Yet another CSS question)

Things I have tried

why doesn’t this color my #context tags blue?

I know the first block is selecting tags. How do I correctly format the .tag[href] bit, I’m thinking that is where I’m going wrong. I copied the style out of the dev tools.

/* General tag code */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag,  body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
    background-color: #a8cce166;
    color: rgb(60,40,40);
}
 
/* why doesn't this color my #context tags blue? */ 
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href]^="#context/"] {
    background-color: #a8cce166;
    color: blue; 
}

The selectors are so mysterious.

What I’m trying to do

I want the #task tag to be grey text and the #context tag to be blue text.

Thanks as usual for any help. I am improving I swear to god.

The first problem I’m seeing is with the brackets. In the end of your #context selector there is one open bracket ([) and two close brackets (]). Start by removing the the first close bracket. Your selector should look like this :point_down:t3:

body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context/"] {
    background-color: #a8cce166;
    color: blue; 
}

Second problem I’m seeing is with the “background-color” property in #context selector. It’s not in HEX or any other color format I know. You should fix that as well. “#a8cce1” is an accepted HEX color, “#a8cce166” is not.

If by any chance the tags weren’t as desired after the fixes, you could try adding !important at the end of your CSS lines to overwrite any previous configs. The final code should look something like this :point_down:t3:

body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context/"] {
    background-color: #a8cce1 !important;
    color: blue !important; 
}

Thanks for the catch on the bracket. Fixing that does not change the problem.

/* General tag code */
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag,  body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
    background-color: #a8cce166;
    color: rgb(60,40,40);
}
 
/* why doesn't this color my #context tags blue? */ 
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context"] {
    background-color: #a8ccff66;
    color: blue; 
}

#a8cce1” is an accepted HEX color, “#a8cce166” is not.

this is not correct. Each two characters are a color channel. This is an rgba value. The final two digits are for transparency. In the first block if you check there are also 8 digits and that value works fine.

Anyhow, it doesn’t matter what value I put in there, I can make them both white and it won’t do anything. So for example this is the same effect:

/* why doesn't this color my #context tags blue? */ 
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag .tag[href^="#context"] {
    background-color: green !important;
    color: blue !important; 
}

Why does the second block have no effect? It looks like it should work, it’s just the same as the first block but with the .tag[href] business. But I am new to the CSS world and it’s a little bit confusing all these special selector formats and markers still.

The unfamiliar looking selector might have something to do with your theme. There exists a simpler way to style the tags in reading view. :point_down:t3:

.tag[href^="#context"] {
	background-color: #a8cce166;
    color: blue; 
}

For the editing view, I guess it would depend on the theme you are using.

1 Like

I was going to say hey I’m in editing view and that simple selector won’t work. But I tested it and guess what? You are right, thanks so much. It was THAT EASY.

For the editing view, I guess it would depend on the theme you are using.

Can you say anything more about this? Thanks

Based on the selector you provided, I thought it had something to do with the Minimal theme since I couldn’t find anything like body:not(.minimal-unstyled-tags) in the vanilla theme. But I gave it another look and it seems that Minimal follows the same appearance settings as the other ones. There’s a class in each tag that contains the “value” of your tag which you could use for styling purposes even in editing mode.

The code below applies the properties to every element that’s got cm-tag-context in its class. So in your case, any tag that beings with context will have said settings in editing mode.

[class*="cm-tag-context"] {
	background-color: #a8cce166 !important;
	color: blue !important; 
}
1 Like

it seems that Minimal follows the same appearance settings as the other ones. There’s a class in each tag that contains the “value” of your tag which you could use for styling purposes even in editing mode.

Thanks! I have noticed this “cm-” patterns with css in Obsidian. Where does this notation come from and what does it mean? Is there a resource I could check into that delves into the css classes in Obsidian and their meanings and how to use them?
I appreciate your pearls of wisdom. I’ll be posting next on how to select text in a but let’s put that in a new thread because I think it’s a harder case. Right?

1 Like

“cm” probably stands for Code Mirror. Which acts as a base for Obsidian’s text editor. If you wish to find resources to tweak Obsidian using CSS, I suggest you start with this thread and make your way up from there.

1 Like

“cm” probably stands for Code Mirror. Which acts as a base for Obsidian’s text editor.

Aha, thanks, interesting.

I asked

Is there a resource I could check into that delves into the css classes in Obsidian and their meanings and how to use them?

You said

If you wish to find resources to tweak Obsidian using CSS, I suggest you start with this thread and make your way up from there.

Thanks I’ve been to that thread a few times but it is good to re-read it after a while with fresh eyes. It does not “delve into the css classes in Obsidian and their meanings and how to use them.” But it is definitely more useful than I remember and I thank you for making me look harder at it this time. The problem is that it’s an old thread and some of the information is inaccurate now. At some point this merits some sort of more structured documentation perhaps. :slight_smile:

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