Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

:dir

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

概要

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

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

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

構文

element:dir(directionality) { CSS プロパティ }

ここで directionality は 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 にマッチします。

仕様

仕様書 策定状況 コメント
Selectors Level 4
The definition of ':dir()' in that specification.
草案 初回定義

ブラウザ対応状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート 未サポート 17 (17)
18 (18) -moz
未サポート 未サポート 未サポート
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート 未サポート 17.0 (17)
18.0 (18) -moz
未サポート 未サポート 未サポート
  • 言語に関連する擬似クラス: :lang, :dir

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

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