Adding CSS to the editor preview

[FroggyC]

Continuing the discussion from Ordered lists with non-number markers:

Quotes from other thread for context.

@Falco

Add a wrapper to those lists and some CSS

In posts use:

[wrap="letterlist"]
1. is the first
2. is the second.
3. is the third
[/wrap]

IN your theme add:

.cooked div[data-wrap="letterlist"]
  list-style: upper-alpha;
}

@FroggyC

I tried using this solution and it works, correcting the CSS to the following (the first line was missing an ol {):

.cooked div[data-wrap="letterlist"] ol {
  list-style: upper-alpha;
}

However I can’t get it to show in the editor preview window, which is going to be a bit of an issue for most of my users. I’ve tried inspecting with the web browser, and it seems the custom CSS is not loaded or applied to the preview (I’m not a professional at this, so I might be wrong).

Any way you can think of to solve this problem, @Falco?

---

What I’m asking in this thread is: is there any way to add custom CSS that is also applied to the editor preview?

[FroggyC]

I figured it out on my own. The solution is to use the .d-editor-preview CSS class as a selector.

.cooked, .d-editor-preview {
  div[data-wrap="letterlist"] {
    ul, ol {
      list-style-type: upper-alpha;
    }
  }
}

[Falco]

That’s the way. The previous was specific to the post as it’s show in the stream, you extended it to also apply in the preview area, so that’s the correct solution indeed.

[FroggyC]

Thank you, Falco.

[FroggyC]

@Falco , if I wanted to differently style the more deeply nested layers of lists, would that be an additional nested level of ol?