Applying cssClasses to note

[ReaderGuy42]

I’d like to apply some css to a specific note.

This snippet works, but applies it to all notes when they’re in preview mode.

.markdown-reading-view .markdown-preview-sizer,
.block-language-dataview.node-insert-event, .block-language-dataviewjs.node-insert-event {
  width: 100% !important;
  max-width: 100% !important;
}

.markdown-reading-view .markdown-preview-sizer>div>*:not(table) {
  margin-left: auto;
  margin-right: auto;
  min-width: var(--file-line-width);
  max-width: var(--file-line-width);
}

.markdown-preview-sizer>div>table {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

But even after including

---
obsidianUIMode: preview
cssClasses: my-table
---

as the frontmatter in my goal note, the following does nothing:

.my-table.markdown-reading-view .my-table.markdown-preview-sizer,
.my-table.block-language-dataview.node-insert-event, .my-table.block-language-dataviewjs.node-insert-event {
  width: 100% !important;
  max-width: 100% !important;
}

.my-table.markdown-reading-view .my-table.markdown-preview-sizer>div>*:not(table) {
  margin-left: auto;
  margin-right: auto;
  min-width: var(--file-line-width);
  max-width: var(--file-line-width);
}

.my-table.markdown-preview-sizer>div>table {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

Any advice?

thanks

[ariehen]

CssClasses are set on markdown-preview-view (or markdown-source-view), so if you flip around the first part, that should take care of it. e.g.

.markdown-preview-view.my-table :is(.markdown-preview-sizer, 
    .block-language-dataview.node-insert-event,
    .block-language-dataviewjs.node-insert-event) {
      width: 100% !important;
      max-width: 100% !important;
}

.markdown-preview-view.my-table .markdown-preview-sizer>div>*:not(table) {
    margin-left: auto;
    margin-right: auto;
    min-width: var(--file-line-width);
    max-width: var(--file-line-width);
}

.markdown-preview-view.my-table .markdown-preview-sizer>div>table {
    width: 100%;
    margin-top: 1em;
    margin-bottom: 1em;
}

In this case, this is also an option and seems to do the trick:

.my-table :is(.markdown-preview-view .markdown-preview-sizer,
.block-language-dataview.node-insert-event, .block-language-dataviewjs.node-insert-event) {
  width: 100% !important;
  max-width: 100% !important;
}

.my-table :is(.markdown-preview-view .markdown-preview-sizer>div>*:not(table)) {
  margin-left: auto;
  margin-right: auto;
  min-width: var(--file-line-width);
  max-width: var(--file-line-width);
}

.my-table :is(.markdown-preview-view .markdown-preview-sizer>div>table) {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 1em;
}

[ReaderGuy42]

Awesome, thank you!