Getting this css snippet to apply to specific pages using cssclass: in the yaml not working correctly

[EdsDad]

I’m trying to remove the strike-through on the checklists only within the pages with cssclass: "recipe" in the YAML. Based on what I’ve seen elsewhere in this forum I’m doing it correctly but for some reason adding .recipe seems to break everything. If anyone has some suggestions on how to get this to work it would be hugely appreciated.

Css Snippet:

.recipe .markdown-preview-view ul>li.task-list-item {
  text-decoration: none;
}

.recipe .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] {
  text-decoration: none;
}

YAML

---
link: https://www.allrecipes.com/recipe/231457/pesto-spaghetti-squash/
obsidianUIMode: preview
cssclass: "recipe"
---

I’ve also tried it with and without the “” around recipe

[Olondre]

space is not allowed between the cssclass and .markdown-preview-view/.markdown-source-view.mod-cm6. As soon as you use those as your first selectors in your css snippet you have to remove that space inbetween. So this should work:

.recipe.markdown-preview-view ul>li.task-list-item {
  text-decoration: none;
}

.recipe.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"] {
  text-decoration: none;
}

[EdsDad]

Wow, I had no idea. Thanks for saving me from banging my head against the wall for the next few hours trying to find some workaround.

[holroy]

The thing is that when you do .recipe .markdown-source-view, it says look for an element of class recipe, and then within that element look for an element of class markdown-source-view. These two classes are however on the same element, and therefore you need to remove the space to make it look for an element having both classes at the same time.