Add extension name attribute to div.nav-file-tag

Use case or problem


I want to apply file extension-specific CSS.


Looking Files pane with developer tools, non-Markdown file is displayed with its file extension, i.e.


<div class="nav-file-tag">xlsx</div>

But since standard CSS selector is not able to select an element with its content, there is no way to apply file extension-specific CSS.

Proposed solution

Add a certain attribute to div

<div class="nav-file-tag" extension="xlsx">xlsx</div>

Then CSS can be applied as follows:

div.nav-file-tag[extension=xlsx] {
  /* xlsx-specific style */
div.nav-file-tag {
  /* general style */

Current workaround (optional)


Related feature requests (optional)


You are on the right track…

[data-path$="xlsx"] {
  font-family: 'Comic Sans MS';
  font-weight: 800;
  color: blue;

[data-path$="xlsx"] .nav-file-tag {
  color: red;


1 Like

Wow, thanks, it works!

For the first I realized that [data-path$="XXX"] can be used as CSS selector. Is this the standard CSS selector? I could not find such information on the web…

There’s not much documentation on this, unfortunately, but pieces are scattered around:

1 Like

Seems it works only in the Obsidian. Tested in the web browser and does not seem to work. Anyway, it doesn’t matter whether it works outside Obsidian. Thanks for information.

1 Like

What is the issue with your solution? I have css targeting elements in the navigation on my publish site

No issue.

My first thought is that standard CSS selector is not able to select HTML element by its content. So I posted this feature request.

However, as ariehen answered, a sort of Obsidian-specific CSS selector works.

But in my understading, you are referring to a totally different context. I am not saying about navigation on published site. But I am saying about File pane in Obsidian desktop/mobile app

I just wanted to elaborate a little on whether this is a standard CSS-selector, or not, and when it’s available. If you look at the Obsidian CSS guide, and navigate your way to a file with an extension, you’ll see something like the following:


Here you can see that the data-path is an added attribute to the .nav-file-title element, thusly allowing for attribute CSS selectors to be applied to it. See MDN or W3Schools for documentation on these.

Basically you can now target any of the attributes in an html element, and you can match against start, end or within the attribute in various combination. A really nifty addition to CSS allowing for some fancy CSS to be applied.

This addition is done by Obsidian, so you kind of have to look it up for each element where you might benefit from it, but if you want to target some element you’ll most likely look it up using Developers Tools (as suggested in the guide above), and then you’ll see if there any extra attributes for you to play around with.

1 Like

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