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

[jeon]

Use case or problem

Short

I want to apply file extension-specific CSS.

Long

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)

None

Related feature requests (optional)

None

[ariehen]

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;
}

[jeon]

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…

[ariehen]

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

Icons For Different File Types - CSS Snippet

I just posted this in the Discord css-channel but thought I’d share here as well. I found a neat way to set different icons based on file type. Using [data-type$(file type here)] you can select based on the attribute value that ends in (file type here). (Had to use emojis for the example since my icons are very long strings). Ex: .nav-file-title[data-path$="jpeg"] .nav-file-title-content:before{ content: ""; } .nav-file-title[data-path$="png"] .nav-file-title-content:before{ content: ""; …

Hide Favicon png Files in file explorer (CSS Snippet)

Greetings. I recently added a terrible favicon to my publish site, and I didn’t like seeing the png files cluttering up my file explorer. (To clarify they never show up in a published site, but they are annoying in the desktop app) I am not going to reference or move these low-resolution png’s around, so their appearance is pointless. I wrote a CSS snippet for hiding files that start with favicon and end with .png div[data-path^='favicon'][data-path$='.png']{ display: none; } Hopefully som…

Show / hide which file types to be shown in file explorer

You can create a css file like the following: div[data-path$='assets'], div[data-path$='assets'] + div.nav-folder-children { display: none; } div[data-path$='.png']{ display: none; } Replace assets and .png with the folder name and extension that you want to exclude. This is a workaround until such a feature may be integrated in some years. (Usually you would setup this once. So that’s a workable workaround)

[jeon]

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.

[TheMathGuyd]

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

[jeon]

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

[holroy]

@jeon

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…

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.