MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

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

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

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

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

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

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

構文

:dir() 疑似クラスは1つの引数を取り、対象としたい文字方向を指定します。

引数

ltr
文字方向が左から右の要素を対象とします。
rtl
文字方向が右から左の要素を対象とします。

構文形式

:dir( ltr | rtl )

HTML

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

CSS

:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

結果

仕様書

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

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本サポート 無し 無し

49

17 — 53 -moz-

無し 無し 無し
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本サポート 無し 無し 無し

49

17 — 53 -moz-

無し 無し ?

関連情報

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

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

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