Why is my css style snippet being overridden?

Things I have tried

By inspecting the CSS from Obsidian, I put this snippet in my app.css file:

However, it is not coloring the tags the way I expect when hovered over. You can see the non-hovered tags are blue backgrounds, that’s what I want all the time. It appears that the :hover code I put into my file is getting somehow overridden, probably by the theme (I think that’s what the --var( --tag-bg2) bit means right?).

What I’m trying to do

I am trying to prevent the tag background turning white when I hover over it. Here is the full code from my app.css file:

body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag {
    background-color: #6622ffcc;
}


/* --------------------------------------------------------- */ 
/* make #context tags pop                                    */
body:not(.minimal-unstyled-tags) .frontmatter-container .tag, body:not(.minimal-unstyled-tags) .frontmatter-container .tag:hover, body:not(.minimal-unstyled-tags) a.tag[href^="#context/"] {
    background-color: #5147ff99;
    color: white;
 }
 
body:not(.minimal-unstyled-tags) .frontmatter-container .tag,  body:not(.minimal-unstyled-tags) a.tag[href^="#context/"] {
    background-color: #5147ff99;
    color: white;
 }
 
body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
    background-color: #5147ff99; 
    color: white;  
}

If anyone sees the problem I’d appreciate it! Thanks!

I only know one way, but it is not the best

After the value force priority using !important.
Ex:

body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
    background-color: #5147ff !important; 
    color: white;  
}

Why is not the best way

Te correct is copy the selector that is interupting and modify them.

1 Like

After the value force priority using !important .
Ex:

Thanks, apologies this is probably a FAQ but what is !important for please?

that’s exactly what I did if you look at the screen shots. I copied the selector and pasted it into my editor, added the :hover to the end, just as in your example actually, but it doesn’t change the behavior. Am I misunderstanding or doing it wrong?

!important

When you have two or more css class, due to cascade, some children end up receiving values they shouldn’t.
With !important you will force this value to have higher priority than the others.
But if you want to overwrite it you will need to use !important too.
Because of this, using !important on long files is not a good practice.

I don’t know if you’re doing it wrong, but before using !important try this:

As you can see the :hover is with the variable --tag-bg-2.
Try to assign the value you want to it:

body:not(.minimal-unstyled-tags) .cm-s-obsidian span.cm-hashtag:hover {
    --tag-bg-2: #5147ff99; 
    color: white;  
}
1 Like

That also does not unlock the puzzle, no change with that. What a difficult case! I’m going to have to learn more about this, not going to let it go. :slight_smile: I need a systematic way to debug this. Guesswork will take a long time and give unpredictable results. I would love to really understand what’s happening in that little code snippet.

1 Like

Solved. I was using multiple .obsidian folders, and was editing the .obsidian.ipad/snippets/app.css file, which does nothing on my desktop. :stuck_out_tongue:
Obsidian is powerful and confusing. :slight_smile: Thanks for the help

1 Like

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