Difficulty with Obsidian CSS vs Roam CSS

Roam CSS is way easier than Obsidian CSS. I have been trying to style internal links in Obsidian for some time now. No Luck. It just took me half an hour to achieve the same in Roam.

(I moved your post from the thread you replied to because it was off-topic.)

However, I don’t really understand your point—do you have anything constructive to suggest?

(Incidentally I have heard the exact opposite feedback from experienced Roam developers. They have complained that Roam’s actual app involves a lot of hardcoded style attributes which make it treacherous to achieve specificity with CSS selectors…)

Perhaps that post is better suited here. But, I am finding custom styling internal links in Obsidian CSS really a difficult thing to do. I have searched a lot on the web and in the forums. Most css styling for links only include changing the color and the font. I also find many people struggle with the same issues as myself. Trying to make it work both in the editor and the preview view.

Sure, maybe share what you’re trying to do exactly and some of what you’ve tried?

1 Like

BTW Liked your discussion on integrated thinking environment

1 Like

My suggestion:

1 - First you need to understand how obsidian works in the two modes: editor mode and preview mode. For example, for internal-link you need to target css code differently to edit or preview mode:

edit mode

.cm-s-obsidian span.cm-hmd-internal-link {
  color :red;

preview mode

.markdown-preview-view .internal-link {
  color: orange;

2 - Then, you need to identify an attribute selector to add a particular style to a specific internal-link. But I think that isn’t so easy in editor mode, because the internal-link isn’t a really link.

3 - Use View > Toggle Developer Tools to identify your target elements.


Thanks for your reply. The real challenge isn’t just changing the color of internal links. But changing the color of the internal links conditionally. The condition I want to set is that if the internal link title contains a particular word / character (such as Z -, E -, CLM, Q - , QUE, @ etc.). I have tried with
.cm-s-obsidian span.cm-hmd-internal-link[href*=“CLM”] {
color : salmon;

a.internal-link[href*=“CLM”] {
color: #e299d0;

But no success.

I understand that. That’s why I said, in my 2nd point, there’s no easy way to do that for edit mode (in edit mode “href” have no effect because it’s a span, not a really link, without a valid attribute to select). But for preview mode it works (your example works):

a.internal-link[data-href="CLM"] {
  color: #e299d0;

You could try this:

.markdown-preview-view a[href*="QUE"] {
  color: teal !important;

.markdown-preview-view a[href*="QUE"]::before {
  content: "🔎 ";

Downside is it cannot style uncreated note links in edit mode :sweat_smile:

Yeah, I see that now. I tried this way by myself and it works in preview. Now got to find a way to make it work in editor. Thanks.

Thanks for your help. Does this work in edit mode for you? I tried it and cannot make it work in editor.

Yes it works for me (but unresolved links in edit mode can’t be styled as shared in a FR)

Okay. Don’t know why it wont work for me. :confused:

Maybe it conflicts with a theme?

I am in default theme.

I don’t really know anymore :thinking:

I actually tried it with two vaults in default theme and they both worked. The only reason it won’t work is if the note doesn’t exist :upside_down_face:

It just bad luck I guess :grinning_face_with_smiling_eyes: Thanks for your help anyway.

1 Like

@DEV_Scribbles I’m in same position: the code for edit mode doesn’t work.
This could be a newbie question, but where do you find the attribute selector “data-link-data-href”? There’s any chance that attribute is given by any plugin?

ooh probably! lemme check