--- title: ':dir()' slug: 'Web/CSS/:dir' tags: - BiDi - CSS - Experimental - Pseudo-class - Reference - セレクター - 疑似クラス translation_of: 'Web/CSS/:dir' ---
{{CSSRef}}

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

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

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

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

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

構文

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

引数

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

形式文法

{{csssyntax}}

例

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;
}

結果

{{ EmbedLiveSample('Examples') }}

仕様書

仕様書 状態 備考
{{SpecName('HTML WHATWG', 'scripting.html#selector-ltr', ':dir(ltr)')}} {{Spec2('HTML WHATWG')}} 変更なし。
{{SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()')}} {{Spec2('CSS4 Selectors')}} 初回定義。

ブラウザーの互換性

{{Compat("css.selectors.dir")}}

関連情報