Pour styliser chaque paragraphe séparément pour les langues RTL et LTR

Dev
1

Bonjour, j’essaie d’utiliser des langues RTL et LTR ensemble dans Discourse. J’ai pensé résoudre ce problème avec du CSS, puisque les paragraphes seront dans un certain ordre dans le contenu. Au début, je prévois d’utiliser :nth-of-type pour les balises p. Mais il y a une surprise. La balise p apparaît automatiquement au début et à la fin des images ajoutées au contenu dans Discourse. Cela a brisé l’utilisation de :nth-of-type. En effet, le nombre de paragraphes que je ciblerai dans le contenu avec et sans images a changé.

image
image1186×294 41.3 KB

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

J’ai donc commencé à réfléchir à une autre solution. J’ai cherché un moyen de cibler les paragraphes qui ont les balises RTL et LTR.

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

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

Cela ne fonctionne pas. Parce que les navigateurs traitent principalement :nth-of-type en premier. Il semble qu’il n’y ait aucun moyen d’utiliser :nth-of-type ou :nth-child sur les attributs.

Auriez-vous une solution à proposer ?