これは実験段階の機能です。
この機能は複数のブラウザーで開発中の状態にあります。互換性テーブルをチェックしてください。また、実験段階の機能の構文と挙動は、仕様変更に伴い各ブラウザーの将来のバージョンで変更になる可能性があることに注意してください。

概要

CSS 擬似クラスである :dir は、要素に含まれるテキストの方向にマッチします。HTML では方向は dir 属性から判断されます。他の文書タイプには、言語を判断する別の方法があるかもしれません。

擬似クラス :dir() を使うのと、 [dir=…] 属性セレクタを使うのとは同じでないことに注意してください。後者は dir の値にマッチしますが、属性がセットされていなければ、要素が親要素の値を継承していてもマッチしません。同様に [dir=rtl][dir=ltr] は、dir 属性に auto 値が使われているとマッチしません。一方、:dir() はユーザーエージェントの計算値、継承値、もしくは auto 値にマッチします。

:dir() はまた、ほとんどの HTML 文書で定義される、文書構造上の意味を持つ (semantic) 方向値だけを判断材料にします。direction のような CSS プロパティでセットされる、文体装飾としての (stylistic) 方向は判断材料としません。

構文

:dir( ltr | rtl )

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

この例の :dir(rtl) は、最上位階層の div、test1 を含む span、そしてヘブライ語の文字を含む div にマッチします。:dir(ltr)test2 を含む div にマッチします。

仕様

仕様書 策定状況 コメント
WHATWG HTML Living Standard
:dir(ltr) の定義
現行の標準 変更なし
Selectors Level 4
:dir() の定義
草案 初回定義

ブラウザー実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
基本サポート 未サポート[1] 17 (17) -moz
49 (49)[2]
未サポート 未サポート[3] 未サポート[1] 未サポート[4]
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート[1] 17.0 (17) -moz
49.0 (49)[2]
未サポート 未サポート 未サポート[4]

[1] この機能は未実装です。Chromium bug 576815 をご覧ください。

[2] 標準化されたプロパティを Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) で実装したため、-moz 接頭辞付きのプロパティを Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50) で削除しました。

[3] Microsoft Edge は、UserVoice で要望が出ています

[4] この機能は未実装です。WebKit bug 64861 をご覧ください。

関連情報

  • 言語に関連する擬似クラス: :lang, :dir

ドキュメントのタグと貢献者

 このページの貢献者: yyss, sosleepy
 最終更新者: yyss,