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

:dir() pseudo-class

:dir() は CSS の擬似クラスで、中に含まれる文字列の方向に基づいて要素を選択します。

css

/* 右から左への文字列がある要素すべてを選択 */ :dir(rtl) { background-color: red; }

:dir() 擬似クラスは書字方向の意味的な値、つまり、文書自体に設定されているもののみを使用します。スタイルによる書字方向、つまり、 direction のような CSS プロパティで設定された書字方向には対応しません。

メモ: :dir() 擬似クラスは [dir=…] 属性セレクターと等価ではないことに注意してください。後者は HTML の dir 属性を選択しますが、これがない要素は、書字方向が親から継承されていても無視します。（同様に、 [dir=rtl] と [dir=ltr] は auto の値に一致しません。）それに対して、 :dir() は継承された場合も含め、ユーザーエージェントが計算した値で選択します。

メモ: HTML では、書字方向は dir 属性で指定されます。他の文書型では異なる方法があるかもしれません。

国際化方向

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
:dir
120
120
49
16.4
120
16.4
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
削除済み
  • このバージョンで機能が削除されました (53)
対応条件
  • ベンダープレフィックス付きで対応: -moz- (17)

基本構文

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

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

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

ライブデモ

LTR Textplacement

:dir() pseudo-class LTR textplacement demo.

プレビュー全画面表示

RTL Textplacement

:dir() pseudo-class RTL textplacement demo.

プレビュー全画面表示

direction by padding

:dir() pseudo-class direction by padding demo.

プレビュー全画面表示

実務での使いどころ

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

    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 属性を設定することが前提。

参考リンク