:dir()

Baseline 2023
Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

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

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

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

構文

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

:dir( [ ltr | rtl ] )

引数

ltr

書字方向が左書きの要素を対象とします。

rtl

書字方向が右書きの要素を対象とします。

HTML

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

CSS

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

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

結果

仕様書

Specification
HTML
# selector-ltr
HTML
# selector-rtl
Selectors Level 4
# dir-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:dir()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報