:dir()

:dir() — псевдокласс, который совпадает с элементами в зависимости от их вычисленного направления письма: :dir(ltr) или :dir(rtl). Направление может приходить от атрибута dir, от языка документа или быть наследовано.

Сдвинем «акцент» цитаты к краю чтения: слева в LTR и справа в RTL.

        
          
          <blockquote dir="ltr">  <p>Ничего на свете лучше нету, чем бродить друзьям по белу свету.</p>  <div class="lang">dir=ltr</div>  <!-- Направление слева направо --></blockquote><blockquote dir="rtl">  <p>السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.</p>  <div class="lang">dir=rtl</div>  <!-- Направление справа налево --></blockquote>
          <blockquote dir="ltr">
  <p>Ничего на свете лучше нету, чем бродить друзьям по белу свету.</p>
  <div class="lang">dir=ltr</div>
  <!-- Направление слева направо -->
</blockquote>

<blockquote dir="rtl">
  <p>السَّلَامُ عَلَيْكُمْ — مثال على نص باللغة العربية.</p>
  <div class="lang">dir=rtl</div>
  <!-- Направление справа налево -->
</blockquote>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          blockquote { background: #1E2024; border-radius: 8px; padding: 12px 14px; }/* Акцент и отступ у начала строки для LTR */blockquote:dir(ltr) {  border-left: 3px solid #2E9AFF;  padding-left: 14px;}/* Акцент и отступ у начала строки для RTL */blockquote:dir(rtl) {  border-right: 3px solid #2E9AFF;  padding-right: 14px;  text-align: right;}
          blockquote { background: #1E2024; border-radius: 8px; padding: 12px 14px; }

/* Акцент и отступ у начала строки для LTR */
blockquote:dir(ltr) {
  border-left: 3px solid #2E9AFF;
  padding-left: 14px;
}

/* Акцент и отступ у начала строки для RTL */
blockquote:dir(rtl) {
  border-right: 3px solid #2E9AFF;
  padding-right: 14px;
  text-align: right;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

        
          
          /* К элементам с направлением слева направо */blockquote:dir(ltr) {  padding-left: 14px;  border-left: 3px solid #2E9AFF;}/* К элементам с направлением справа налево */blockquote:dir(rtl) {  padding-right: 14px;  border-right: 3px solid #2E9AFF;  text-align: right;}
          /* К элементам с направлением слева направо */
blockquote:dir(ltr) {
  padding-left: 14px;
  border-left: 3px solid #2E9AFF;
}

/* К элементам с направлением справа налево */
blockquote:dir(rtl) {
  padding-right: 14px;
  border-right: 3px solid #2E9AFF;
  text-align: right;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

:dir() опирается на вычисленную направленность элемента (Unicode Bidi + dir), а не только на наличие атрибута. Поэтому :dir(rtl) сработает и на потомках узла с dir="rtl", даже если у них нет собственного атрибута.

Отличие от селектора атрибута [dir="rtl"]: атрибутный селектор совпадёт только с теми элементами, у которых явно задан dir. Псевдокласс :dir() учитывает наследование и правила языка.

💡 Используйте :dir() для симметричных отступов/границ, чтобы избежать дублирования «лево/право» правил.
💡 Комбинируйте с логическими свойствами (margin-inline-start, padding-inline-end) — тогда часть правил можно вовсе не ветвить по направлению.
💡 При смешанных направлениях внутри блока (вставки на другом языке) :dir() поможет точечно поправить выравнивание и декоративные элементы.