:dir()

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

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

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

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

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

        
          
          blockquote {  border-radius: 8px;  padding: 12px 14px;  border-inline-start: 3px solid #2E9AFF;  padding-inline-start: 14px;}blockquote:dir(rtl) {  border-inline-start-color: #F498AD;}
          blockquote {
  border-radius: 8px;
  padding: 12px 14px;
  border-inline-start: 3px solid #2E9AFF;
  padding-inline-start: 14px;
}

blockquote:dir(rtl) {
  border-inline-start-color: #F498AD;
}

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

        
          
          /* К элементам с направлением слева направо */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() опирается на вычисленную направленность элемента, а не просто на наличие атрибута dir. Вычисленная направленность определяется в следующем порядке:

1. Атрибут dir на самом элементе
2. Атрибут dir на родительских элементах (наследование)
3. Атрибут lang и правила языка документа

Поэтому :dir(rtl) сработает на потомках с dir="rtl", даже если у них нет собственного атрибута.

Главное отличие :dir() от атрибутного селектора [dir="rtl"]:

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

        
          
          <div dir="rtl">  <!-- У этого абзаца нет атрибута dir, но направление вычисляется как rtl -->  <p>Этот абзац унаследовал направление rtl.</p>  <!-- А этот абзац явно переопределил направление -->  <p dir="ltr">А этот абзац явно переопределил направление на ltr.</p></div>
          <div dir="rtl">
  <!-- У этого абзаца нет атрибута dir, но направление вычисляется как rtl -->
  <p>Этот абзац унаследовал направление rtl.</p>
  <!-- А этот абзац явно переопределил направление -->
  <p dir="ltr">А этот абзац явно переопределил направление на ltr.</p>
</div>

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

        
          
          /* :dir(rtl) сработает на унаследованном элементе */p:dir(rtl) {  background-color: #FF8630;}/* [dir="rtl"] НЕ сработает на унаследованном элементе */p[dir="rtl"] {  border: 2px solid white;}
          /* :dir(rtl) сработает на унаследованном элементе */
p:dir(rtl) {
  background-color: #FF8630;
}

/* [dir="rtl"] НЕ сработает на унаследованном элементе */
p[dir="rtl"] {
  border: 2px solid white;
}

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

В этом примере первый абзац получит оранжевый фон от :dir(rtl), но не получит белую рамку от [dir="rtl"], потому что у него нет атрибута dir.

:dir() и :lang() — это разные псевдоклассы для разных задач:

• :lang() — выбирает элементы по языку (атрибут lang)
• :dir() — выбирает элементы по направлению письма

Они не конфликтуют и могут использоваться вместе. Например, селектор :lang(ar):dir(rtl) выберет только арабские элементы с направлением справа налево. Очерёдность применения не влияет на результат, потому что они проверяют разные характеристики элемента.

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