# Adding CSS to the editor preview
**URL:** https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756
**Category:** Development
**Created:** [August 26, 2023, 11:31am UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756 "2023-08-26T11:31:47Z")
**Posts on this page:** 6
**Page:** 1
### Author:  [@FroggyC](https://meta.discourse.org/u/FroggyC)
#### Post date: [August 26, 2023, 11:31am UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/1 "2023-08-26T11:31:48Z")
Continuing the discussion from [Ordered lists with non-number markers](https://meta.discourse.org/t/ordered-lists-with-non-number-markers/127745/7):
Quotes from other thread for context.
> [@Ordered lists with non-number markers](https://meta.discourse.org/t/ordered-lists-with-non-number-markers/127745/5):
>
> Add a wrapper to those lists and some CSS
>
> In posts use:
>
> ```plaintext
> [wrap="letterlist"]
> 1. is the first
> 2. is the second.
> 3. is the third
> [/wrap]
>
> ```
>
> IN your theme add:
>
> ```plaintext
> .cooked div[data-wrap="letterlist"]
> list-style: upper-alpha;
> }
>
> ```
> [@Ordered lists with non-number markers](https://meta.discourse.org/t/ordered-lists-with-non-number-markers/127745/7):
>
> I tried using this solution and it works, correcting the CSS to the following (the first line was missing an `ol {`):
>
> ```plaintext
> .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?
---
### Author:  [@FroggyC](https://meta.discourse.org/u/FroggyC)
#### Post date: [August 26, 2023, 11:49am UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/2 "2023-08-26T11:49:17Z")
I figured it out on my own. The solution is to use the `.d-editor-preview` CSS class as a selector.
```css
.cooked, .d-editor-preview {
div[data-wrap="letterlist"] {
ul, ol {
list-style-type: upper-alpha;
}
}
}
```
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [August 26, 2023, 8:58pm UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/3 "2023-08-26T20:58:34Z")
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.
---
### Author:  [@FroggyC](https://meta.discourse.org/u/FroggyC)
#### Post date: [August 27, 2023, 10:46am UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/4 "2023-08-27T10:46:30Z")
Thank you, Falco.
---
### Author:  [@FroggyC](https://meta.discourse.org/u/FroggyC)
#### Post date: [August 27, 2023, 6:48pm UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/5 "2023-08-27T18:48:34Z")
@Falco , if I wanted to differently style the more deeply nested layers of lists, would that be an additional nested level of `ol`?
---
### Author:  [@system](https://meta.discourse.org/u/system)
#### Post date: [September 26, 2023, 6:48pm UTC](https://meta.discourse.org/t/adding-css-to-the-editor-preview/276756/6 "2023-09-26T18:48:53Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.