Css snippets code that is responsible for applying snippet only where the YAML property "cssclass:" is set?

What code in the CSS snippet is responsible for applying CSS snippet only where the YAML property “cssclass: thatcsssnippet” is set?
As far as i know by default css snippets are active everywhere (on every page), but if the snippet has some specific code it will only apply where the YAML property is set
Maybe i could find some info anywhere or manual?
Thank you!

If your CSS snippet has a selector with a custom class name that you make, then it should only be enabled when that custom class name is set in your cssclass. Silly example below that can maybe help explain better than words. When looking at the silly example, a question to ponder: Without changing the CSS file, how would you change the markdown so that H1 is unmodified but H2 is red?

Silly example markdown note:

---
cssclass: [redH1, blueH2]
---

# Test H1

## Test H2

Silly example CSS snippet:

.redH1 h1 {
  color = red;
}

.blueH2 h2 {
  color = blue;
}

.redH2 h2 {
  color = red;
}

Hope this helps! Also warning that I might have typos in my CSS, apologies if so!

2 Likes

I am grateful for your Example :+1:, finally i can modify my CSS snippets to apply it only on specific Pages in a vault.
Have a nice day :man_technologist:, thank you for solution!

1 Like

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