Newly available 条件付きYES。Baseline Newly available。RTL対応が必要なプロジェクトで使用推奨。フォールバックとして [dir] 属性セレクターを用意。
セレクター Newly available

:dir() pseudo-class

:dir() は要素の計算されたテキスト方向に基づいてマッチする。[dir="rtl"] 属性セレクターと異なり、親から継承された方向も考慮する。アラビア語やヘブライ語など RTL 言語への対応に有用。

国際化方向

概要

:dir() は要素の計算されたテキスト方向に基づいてマッチする。[dir="rtl"] 属性セレクターと異なり、親から継承された方向も考慮する。アラビア語やヘブライ語など RTL 言語への対応に有用。

対応ブラウザ

デスクトップ

Chrome 120+
Edge 120+
Safari 16.4+
Firefox 49+

モバイル

Chrome Android 120+
Safari iOS 16.4+
Firefox Android 49+

基本構文

CSS 
:dir(rtl) {
  text-align: right;
}

:dir(ltr) {
  text-align: left;
}

.nav-icon:dir(rtl) {
  transform: scaleX(-1);
}

実務での使いどころ

  • 多言語サイトのレイアウト切替

    RTL言語でアイコンの方向やパディングの向きを自動調整。

  • 方向依存のアイコン反転

    矢印アイコンなどをテキスト方向に合わせて自動反転。

注意点

  • Baseline Newly available のため、古いブラウザでは [dir] 属性セレクターでフォールバックが必要。
  • Firefox は早期に対応（49）しているが、Chrome/Edge は 120 以降。

フォールバック戦略

CSS 
/* フォールバック */
[dir="rtl"] .nav-icon {
  transform: scaleX(-1);
}

/* モダンブラウザ */
.nav-icon:dir(rtl) {
  transform: scaleX(-1);
}

アクセシビリティ

  • html 要素に正しい dir 属性と lang 属性を設定することが前提。

参考リンク