I can't get the property cssclasses to work

What I’m trying to do

I’m trying to use the cssclasses property and I cannot get it to work. I’ve not found recent related issues.

The css I’m using works; it modifies a dataview table heading. When the css is enabled under Options>Appearance>Snippets, the table looks like this in Reading mode:
image

When the css is disabled under Options>Appearance>Snippets the table looks like this in Reading Mode:

image

So I know the css works. What I don’t know is how to get it to work for the tables in just this page.

my frontmatter looks like this in Live Preview:

---
datecreated: 2025-01-28
cssclasses:
  - dataview_tables
---

Things I have tried

I’ve read the help file and it is not clear how to enter the css. It doesn’t say if it should include .css, or if the entire thing has to be put into quotation marks, so I tried them all.

cssclasses: dataview_tables.css
cssclasses: "dataview_tables"
cssclasses: "dataview_tables.css"

Note that the snippet was always disabled in the Settings when I tried all of these. I figured it has to be disabled, otherwise it would apply automatically to all tables.

My snippet code, although it works fine when being applied to all or none of the dataview tables:

/* header row bg colour */
thead {
    background-color: #37373a;
}
/* th font weight and size */
.markdown-preview-view th, table.dataview.table-view-table th {
    font-weight: 600;
    font-size: 0.97em;
    border-bottom: none;
    border-bottom-width: 1px; /* medium, thin, thick, 1px */
    border-bottom-color: grey;
}
/* td and tr font size */
.markdown-preview-view td, table.dataview.table-view-table tr {
    font-size: 0.92em;
}

This is all related to my other post Need css for default embed, that I’ve been troubleshooting but the css never works, which brings me to this: maybe it’s less to do with the code I’ve been trying and more to do with how I’m entering the css in the properties.

Unlike CSS Snippets, the cssclasses property doesn’t use the filename. Instead, you have to create a new CSS class name inside of your Snippet, then invoke the new class name. For example, let’s say your dataview_tables.css Snippet had the following new class added called my-table-full-width

.my-table-full-width table {
  width: 100% !important;
}

Then, to invoke this new class, you would use the name of the class, not the Snippet file name…

---
datecreated: 2025-01-28
cssclasses:
  - my-table-full-width
---
2 Likes

dataview_tables.css

/* header row bg colour */
.my-dv-tables thead {
    background-color: #37373a;
}
/* th font weight and size */
.my-dv-tables .markdown-preview-view th,
.my-dv-tables table.dataview.table-view-table th {
    font-weight: 600;
    font-size: 0.97em;
    border-bottom: none;
    border-bottom-width: 1px; /* medium, thin, thick, 1px */
    border-bottom-color: grey;
}
/* td and tr font size */
.my-dv-tables .markdown-preview-view td,
.my-dv-tables table.dataview.table-view-table tr {
    font-size: 0.92em;
}

Note

---
datecreated: 2025-01-28
cssclasses:
  - my-dv-tables
---

<Edit: fixed CSS error>

Thank you so much for that! I didn’t read that anywhere, or if I did, I didn’t clue in at all.

Just so that it is crystal clear in my mind…

I create a snippet, and I enable it.
I include a class name that could not conflict with anything in Obsidian, so “my-this-or-that”, and this is important because the snippet is always “on”, but it can’t do anything because the classes don’t exist per se. I could stick in a bunch of classes in the same snippet using this type of custon name. Either way, the custom classes only come into effect when called by cssclasses.

Correct?


Just wondering what happens when I need to modify a class that obsidian does recognize? Say I have the following turned on by default because I don’t ever want to see H1 when I embed a file:

.embed_hide_h1 .markdown-embed h1{
    display: none;
}

Now I’m on a page where I do want to display the H1. In my special snippet that includes a few of my custom classes, how do add my class name to the Obsidian classes I want to modify?

I’m assuming I don’t just add my own class name like this:

.my-show-embed-h1 .embed_hide_h1 .markdown-embed h1{
    display: flex;

edit> oops, sorry, we were posting at the same time. Just reading your example now.

It looks like we both posted simultaneously. See my above post for a solution using your existing settings.

Exactly correct!

A couple more links describing how to style Dataview queries…

https://blacksmithgu.github.io/obsidian-dataview/resources/faq/#how-can-i-style-my-queries

Thanks for that link. Super useful.

1 Like

Good luck Lise!

I’m going to move this over to the custom CSS category.

Sure. I would suggest a small paragraph be added to the documentation about how the cssclasses property uses a class name as its value (and what that entails) and not the name of the snippet.

1 Like

I think it’s probably hard to decide what CSS examples to put in the official help docs as there’s so much variation in what people what to do. A simple example of how to use cssclasses would be a good one though.

As the bottom of https://help.obsidian.md there’s a Github link where you can post corrections, suggestions for improving the help documentation, etc.

and click on Issues:

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