To style each paragraph separately for RTL and LTR languages

Dev
1

Hi, i am trying to use RTL and LTR languages together in Discourse. I thought of solving this with CSS, since the paragraphs will be in a certain order in the content. At first I am planning to use nth-type-of for the p tags. But there is a surprise. The p tag appears automatically at the beginning and end of the images added to the content in Discourse. This broke the use of nth-type-of. Because the number of paragraphs that I will target in the content with and without images has changed.

image
image1186×294 41.3 KB

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

So I started thinking about another solution. I looked for a way to target paragraphs that have the RTL and LTR tag.

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

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

It doesn’t work. Because browsers primarily takes nth-of-type to process. It seems there is no way to use nth-type-of or nth-child of attribute’s.

Would you suggest a solution for this?