Apply CSS modifications for one file only

[tb87]

I’m trying to apply some CSS modification on one specific file.

For example, consider the following CSS code:

.markdown-preview-view h1 { color: red; }

I know I can put that in a CSS snippet to change the header color, but what if I want to apply this code to one file only? I’m far from being an expert in CSS but I think I can do that through the cssclass YAML keyword of the specific file and by defining a custom CSS class (that would thus only apply to this one file), but I’m not too sure about the syntax. I’ve used cssclass successfully for other things (e.g. simply adding columns to a file) but now the syntax is different.

Is it possible to do that this way (or any other way for that matter)?

[efemkay]

U want to create a custom class for that element u want to modify, so ur css would read sth like below

.customh1 .markdown-preview-view h1 {
    color: red;
}

And in ur note u would add the yaml like this

---
cssclass: customh1
---

# my heading

the rest of the note

The “my heading” (and all h1 in that note) will have color red

[tb87]

Hmm, this is weird. I’ve done exactly like you suggested but it doesn’t work for me. The heading remains black, unless I remove .customh1 in the snippet file (then it gets applied, but to all files).

[efemkay]

my bad. there should be no spacing between .customh1 and .markdown-preview-view (because they are both classes of the same div)

.customh1.markdown-preview-view h1 {
    color: red;
}

[tb87]

Wonderful!

Been searching for that syntax for the last two hours—thank you @efemkay !