: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 つの引数を取り、対象としたい書字方向を指定します。
css
:dir([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 |