Style internal links to non-markdown files

[Goettervater]

What I’m trying to do

I would like to apply a different colour to internal links that direct to files other than markdown, such as imported Word documents. These links trigger the opening of another software, so I want to visually differentiate them from standard markdown links.

Things I have tried

I am currently using CSS to style my internal and external links, but I’m unsure how to specifically target and style links that point to non-markdown files. I’ve searched the help documentation and forums but haven’t found a clear solution.

[ariehen]

You can target individual file types in Reading view / rendered contexts. e.g.

.markdown-rendered :is(a[href$='.docx'], a[href$='.docx']:hover) {
    color: salmon;
}

top: Source mode | bottom: Reading view

I don’t think it’s possible to do in the editor with CSS alone. Maybe someone has a clever solution.

[Goettervater]

Thank you! This gave me the push in the right direction. I found the following solution:

Blockquote
/* Editing mode /
.cm-s-obsidian .cm-inline-link[href$=‘.pdf’] {
color: #D8A8F0;
}
.cm-s-obsidian .cm-inline-link[href$=‘.pdf’]:hover {
color: #D8A8F0;
}
/ Reading mode */
.markdown-rendered :is(a[href$=‘.pdf’], a[href$=‘.pdf’]:hover) {
color: #D8A8F0;
}