RTL および LTR 言語ごとに各段落を個別にスタイル設定する方法

開発
1

こんにちは、Discourse で RTL と LTR の言語を併用しようとしています。コンテンツ内の段落の順序が一定であるため、CSS で解決できるかと思いました。当初は p タグに対して nth-of-type を使う計画でしたが、予期せぬ問題が発生しました。Discourse に画像を追加すると、その前後に自動的に p タグが生成されるためです。これにより nth-of-type の使用が妨げられました。画像の有無によって対象とする段落の数が変わってしまうからです。

image
image1186×294 41.3 KB

.cooked > p:nth-of-type(5) {
  color: brown; 
  font-size: 16px;
}

そこで別の解決策を考え始めました。RTL と LTR の属性を持つ段落をターゲットにする方法を探しました。

:nth-of-type() of [attribute=value]

.cooked > p[dir="ltr"]:nth-of-type(1) {
  color: brown; 
  font-size: 16px;
}

しかし、これは機能しません。ブラウザは主に nth-of-type を優先して処理するためです。属性を指定した nth-of-type や nth-child を使う方法はないようです。

何か良い解決策をご提案いただけますでしょうか？