From cd01acdddcfd03075057ba7b00073aa22567e8dc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Mon, 3 Jan 2022 15:58:55 +0900 Subject: 2021/08/13 時点の英語版に同期 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/_colon_dir/index.md | 127 ++++++++++++++--------------------- 1 file changed, 52 insertions(+), 75 deletions(-) (limited to 'files/ja/web') diff --git a/files/ja/web/css/_colon_dir/index.md b/files/ja/web/css/_colon_dir/index.md index 5d0951f8ab..4f7fa78c45 100644 --- a/files/ja/web/css/_colon_dir/index.md +++ b/files/ja/web/css/_colon_dir/index.md @@ -4,107 +4,84 @@ slug: 'Web/CSS/:dir' tags: - BiDi - CSS - - Experimental - - Pseudo-class - - Reference + - 実験的 + - 擬似クラス + - リファレンス - セレクター - - 疑似クラス +browser-compat: css.selectors.dir translation_of: 'Web/CSS/:dir' --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`:dir()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、中に含まれる文字列の方向に基づいて要素を選択します。 -
/* 右から左への文字列がある要素すべてを選択 */
+```css
+/* 右から左への文字列がある要素すべてを選択 */
 :dir(rtl) {
   background-color: red;
-}
+} +``` -

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

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

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

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

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

-
+> **Note:** HTML では、書字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書型では異なる方法があるかもしれません。 -

構文

+## 構文 -

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

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

引数

+### 引数 -
-
ltr
-
文字方向が左から右の要素を対象とします。
-
rtl
-
文字方向が右から左の要素を対象とします。
-
+- `ltr` + - : 書字方向が左書きの要素を対象とします。 +- `rtl` + - : 書字方向が右書きの要素を対象とします。 -

形式文法

+### 形式文法 {{csssyntax}} -

例

+## 例 -

HTML

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

CSS

+### CSS -
:dir(ltr) {
+```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")}}

-
+} +``` + +### 結果 + +{{ EmbedLiveSample('Examples') }} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

関連情報

+## 関連情報 - +- 言語に関連する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}} +- HTML の {{htmlattrxref("lang")}} 属性 +- HTML の {{htmlattrxref("translate")}} 属性 -- cgit v1.2.3-54-g00ecf