Using cssclasses in snippets

[ariehen]

After using Obsidian for a long time, I still think the ability to apply a cssclass (or multiple cssclasses) to individual notes is one of the smartest features of using CSS in Obsidian. My vaults are fairly basic UI wise, but I make liberal use of cssclasses for meaning and having fun in different notes.

This topic, of course, won’t cover every scenario, but it should serve as a good introduction to writing and using cssclasses in your notes.

Adding a cssclass or cssclasses to a note

cssclasses is one of the default Properties you can add to a note, allowing you to style that note—and only that note—with custom CSS.

In Source mode you can write the Property and value in YAML as:

---
cssclasses: inline-color
---

and it will work, but if you use the Properties UI at all, Obsidian will reformat it as a list:

---
cssclasses:
  - inline-color
---

and with multiple cssclasses in a note:

---
cssclasses:
  - inline-color
  - myclass
---

If writing the cssclass in Source mode, I tend to use the list version even if there’s only one value.

Update: as of Obsidian 1.9.0:

• We have officially removed support for the properties tag, alias, cssclass in favor of tags, aliases and cssclasses. In addition, the values of these properties must be a list. If the current value is a text property, it will no longer be recognized by Obsidian.

Where cssclasses are added

Now that we’ve taken care of adding a cssclass to a note, we need to write the actual CSS it refers to. But first, let’s take a look at what happens when a cssclass is added to a note:

As you can see, cssclasses are added to both the .markdown-source-view (Source mode and Live Preview) and .markdown-preview-view (Reading view) elements.

Using variables with cssclasses

Using Obsidian’s CSS variables work well with cssclasses, as they typically apply across all viewing modes with minimal effort. For example, by using the --inline-title-color variable, we can easily change the inline title color like this:

.view-content .inline-color {
    --inline-title-color: hotpink;
}

or

.inline-color {
    --inline-title-color: hotpink;
}

I like to be a bit more specific and generally use the first option, but both work.

When changing colors, you may want to target light and dark modes separately. Adding .theme-light or .theme-dark with a space in front of the selector(s) does just that:

.theme-light .view-content .inline-color {
    --inline-title-color: hotpink;
}

.theme-dark .view-content .inline-color {
    --inline-title-color: gold;
}

Another example is changing the width of notes (a cssclass of wideish):

.view-content .wideish {
    --my-custom-width: 1000px; /* default is 700px */
    --file-line-width: var(--my-custom-width);
    --line-width: var(--my-custom-width); /* for the Minimal theme if you are often switching themes */
}

Changing the color and font-face of h1~h3 headings (a cssclass of my-headings1):

.view-content .my-headings1 {
    --h1-color: blue;
    --h2-color: orange;
    --h3-color: salmon;
    --h1-font: 'MonoLisa';
    --h2-font: 'Victor Mono';
    --h3-font: 'Monaspace Radon';
}

There’s a lot you can customize using just the CSS variables alone.

---

You can also mix variables in with standard CSS declarations. e.g., here changing the background color, text color, cursor/caret color, etc., of a note.

.view-content .dark-note-rises {
    background-color: rgb(68,68,68);
    --text-normal: rgb(209,209,209);
    color: var(--text-normal);
    --metadata-label-text-color: orange;
    --metadata-input-text-color: var(--text-normal);

    & .cm-content {
        caret-color: rgba(49,177,235,1);
    }
}

.markdown-source-view and .markdown-preview-view

Sometimes, there’s no CSS variable available for what you want to change, so you’ll need to target elements more specifically.

For example, adding an indent to paragraphs in the editor and Reading view:

.markdown-source-view.writing .cm-line:not(.HyperMD-header, .HyperMD-codeblock),
.markdown-preview-view.writing p {
    text-indent: 1.75em;
}

A topic here on that: https://forum.obsidian.md/t/fiction-indents-without-code-block-formatting/100289/2

---

.writing.markdown-source-view and .writing.markdown-preview-view (with the .writing first) also works fine,

.writing.markdown-source-view .cm-line:not(.HyperMD-header, .HyperMD-codeblock),
.writing.markdown-preview-view p {
    text-indent: 1.75em;
}

but I tend to write the custom cssclass after the .markdown-source-view and .markdown-preview-view classes as that makes sense to me.

※ One thing to watch out for is spaces in your selectors. For example,
.writing .markdown-source-view { ... }
tells the CSS to look for an element with the class .writing, and then look inside it for a separate element with the class .markdown-source-view – which doesn’t exist. Since both classes are on the same element, you want to target them together using .writing.markdown-source-view (no space), which selects elements that have both classes.

Bits and pieces

There are also times you can skip writing the .markdown-source-view and/or .markdown-preview-view classes if you don’t need to target them specifically. e.g., hiding the inline-title for notes with the cssclass of no-inline (an example mentioned in the CSS snippets help docs).

.no-inline .inline-title {
   display: none;
}

or changing the gutter’s background color (where the line numbers are) with gutter-grey if you wanted to do that:

.gutter-grey .cm-lineNumbers {
    background-color: rgba(211,211,211,0.2);
}

Using :not to apply snippets to all notes except those with cssclasses

There may be times you want to apply a snippet or two to all notes in a vault except those you give a cssclass to. This can be accomplished using the :not() pseudo-class.

One example is removing the inline title for all notes except those you give the show-inline cssclass:

.markdown-preview-view:not(.show-inline) .inline-title,
.markdown-source-view:not(.show-inline) .inline-title {
    display: none;
}

or

:is(.markdown-preview-view, .markdown-source-view):not(.show-inline) .inline-title {
    display: none;
}

Another example is removing the embed left border and padding for notes except those you give the regular-embeds cssclass:

.markdown-preview-view:not(.regular-embeds),
.markdown-source-view:not(.regular-embeds) {
    --embed-border-start: 0;
    --embed-border-left: 0;
    --embed-padding: 0;
}

or

:is(.markdown-preview-view, .markdown-source-view):not(.regular-embeds) {
    --embed-border-start: 0;
    --embed-border-left: 0;
    --embed-padding: 0;
}