From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/_colon_dir/index.html | 112 +++++++++++++++++++++++++++++++++ 1 file changed, 112 insertions(+) create mode 100644 files/ja/web/css/_colon_dir/index.html (limited to 'files/ja/web/css/_colon_dir') diff --git a/files/ja/web/css/_colon_dir/index.html b/files/ja/web/css/_colon_dir/index.html new file mode 100644 index 0000000000..5a97d10b89 --- /dev/null +++ b/files/ja/web/css/_colon_dir/index.html @@ -0,0 +1,112 @@ +--- +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")}}

+
+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf