Добавление CSS в предпросмотр редактора

[FroggyC]

Продолжение обсуждения из темы Нумерованные списки с небуквенными маркерами:

Цитаты из другой темы для контекста.

@Falco

Добавьте обертку к этим спискам и немного CSS.

В постах используйте:

[wrap="letterlist"]
1. это первый
2. это второй.
3. это третий
[/wrap]

В вашей теме добавьте:

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

@FroggyC

Я попробовал это решение, и оно работает, исправив CSS следующим образом (в первой строке не хватало ol {):

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

Однако мне не удаётся отобразить это в окне предпросмотра редактора, что станет проблемой для большинства моих пользователей. Я пробовал проверять это через веб-браузер, и кажется, что пользовательский CSS не загружается или не применяется к предпросмотру (я не профессионал в этом, так что могу ошибаться).

Можете ли вы предложить какое-либо решение этой проблемы, @Falco?

---

Мой вопрос в этой теме: есть ли способ добавить пользовательский CSS, который также применялся бы к предпросмотру редактора?

[FroggyC]

Я разобрался сам. Решение заключается в использовании CSS-класса .d-editor-preview в качестве селектора.

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

[Falco]

Вот как нужно. Предыдущее решение было специфичным для поста, как он отображается в ленте, а вы расширили его, чтобы оно также работало в области предпросмотра, так что это действительно правильное решение.

[FroggyC]

Спасибо, Фалько.

[FroggyC]

@Falco, если я хочу по-другому стилизовать более глубоко вложенные уровни списков, будет ли это дополнительным уровнем вложенности ol?