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

:dir() pseudo-class

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

css

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

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

国際化方向

対応ブラウザ

機能 デスクトップ モバイル
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 テキスト配置

:dir() pseudo-class の LTR テキスト配置 パターンです。

プレビュー全画面表示

RTL テキスト配置

:dir() pseudo-class の RTL テキスト配置 パターンです。

プレビュー全画面表示

方向別パディング

:dir() pseudo-class の 方向別パディング パターンです。

プレビュー全画面表示

実務での使いどころ

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

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

参考リンク