Как отдельно стилизовать каждый абзац для языков с направлением письма справа налево и слева направо

Разработка
1

Привет! Я пытаюсь использовать вместе языки с направлением письма справа налево (RTL) и слева направо (LTR) в Discourse. Сначала я подумал решить это с помощью CSS, так как абзацы в контенте будут идти в определённом порядке. Изначально я планировал использовать псевдокласс nth-of-type для тегов <p>. Но возникла неожиданность. В 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() вместе с селектором по атрибуту [attribute=value]:

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

Это не работает. Дело в том, что браузеры сначала обрабатывают псевдокласс nth-of-type. Похоже, нет возможности использовать nth-of-type или nth-child на основе атрибутов.

Не могли бы вы предложить решение этой проблемы?