تصميم كل فقرة بشكل منفصل للغات من اليمين إلى اليسار واليسار إلى اليمين

مرحباً، أحاول استخدام اللغات من اليمين إلى اليسار (RTL) ومن اليسار إلى اليمين (LTR) معاً في منصة Discourse. فكّرتُ في حل هذه المشكلة باستخدام CSS، نظرًا لأن الفقرات ستظهر بترتيب معين في المحتوى. في البداية، كنتُ أخطط لاستخدام nth-of-type لوسوم p. لكنني واجهت مفاجأة؛ حيث يظهر وسم p تلقائيًا في بداية ونهاية الصور المضافة إلى المحتوى في Discourse، مما أخلّ باستخدام nth-of-type. وذلك لأن عدد الفقرات التي سأستهدفها في المحتوى يتغير باختلاف وجود الصور أو عدمها.

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

لذا بدأت أفكر في حل بديل. بحثت عن طريقة لاستهداف الفقرات التي تحمل وسوم RTL و LTR.

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

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

هذا لا يعمل. لأن المتصفحات تعطي أولوية لمعالجة nth-of-type أولاً. ويبدو أنه لا توجد طريقة لاستخدام nth-of-type أو nth-child بناءً على السمات.

هل يمكنك اقتراح حل لهذه المشكلة؟