RTL 및 LTR 언어별로 각 단락을 별도로 스타일링하는 방법

개발
1

안녕하세요, Discourse에서 RTL과 LTR 언어를 함께 사용하려고 시도하고 있습니다. 콘텐츠 내에서 단락이 특정 순서로 배치되므로 CSS로 해결할 수 있을 것 같았습니다. 처음에는 p 태그에 nth-type-of를 사용할 계획이었습니다. 하지만 문제가 생겼습니다. Discourse에서 콘텐츠에 추가된 이미지 앞뒤에 p 태그가 자동으로 생성됩니다. 이로 인해 nth-type-of 사용이 불가능해졌습니다. 이미지 유무에 따라 콘텐츠에서 대상이 되는 단락의 수가 달라졌기 때문입니다.

image
image1186×294 41.3 KB

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

그래서 다른 해결책을 찾기 시작했습니다. RTL과 LTR 태그를 가진 단락을 표적(target)으로 지정하는 방법을 찾아보았습니다.

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

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

이 방법은 작동하지 않습니다. 브라우저가 처리할 때 우선적으로 nth-of-type을 적용하기 때문입니다. 속성을 기반으로 nth-type-of 또는 nth-child를 사용하는 방법은 없는 것 같습니다.

이 문제에 대한 해결책을 제안해 주실 수 있을까요?