エディタプレビューにCSSを追加する

[FroggyC]

Ordered lists with non-number markers からの議論を続けます。

コンテキストのための他のスレッドからの引用。

@Falco

それらのリストにラッパーとCSSを追加します

投稿では次を使用します。

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

テーマに次を追加します。

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

@FroggyC

このソリューションを試したところ、機能しました。CSSを次のように修正しました（最初の行に ol { が欠けていました）。

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

しかし、エディタのプレビューウィンドウに表示させることができません。これはほとんどのユーザーにとって問題となるでしょう。Webブラウザで検査してみましたが、カスタムCSSがロードされていないか、プレビューに適用されていないようです（私はプロではないので、間違っているかもしれません）。

@Falco、この問題を解決できる方法はありますか？

---

このスレッドで質問しているのは、エディタのプレビューにも適用されるカスタムCSSを追加する方法があるかどうかということです。

[FroggyC]

自分で解決しました。.d-editor-preview CSSクラスをセレクターとして使用します。

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

[Falco]

それが正しい方法です。以前はストリームに表示される投稿に限定されていましたが、プレビューエリアにも適用されるように拡張されたため、それがまさに正しい解決策です。

[FroggyC]

ファルコ、ありがとう。

[FroggyC]

@Falco 、より深くネストされたリストのレイヤーを別のスタイルにしたい場合、それは ol の追加のネストされたレベルになりますか？