blob: 4f7fa78c45f5058e305e366369160be9f1453834 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
---
title: ':dir()'
slug: 'Web/CSS/:dir'
tags:
- BiDi
- CSS
- 実験的
- 擬似クラス
- リファレンス
- セレクター
browser-compat: css.selectors.dir
translation_of: 'Web/CSS/:dir'
---
{{CSSRef}}
**`:dir()`** は [CSS](/ja/docs/Web/CSS) の[擬似クラス](/ja/docs/Web/CSS/Pseudo-classes)で、中に含まれる文字列の方向に基づいて要素を選択します。
```css
/* 右から左への文字列がある要素すべてを選択 */
:dir(rtl) {
background-color: red;
}
```
`:dir()` 擬似クラスは書字方向の意味的な値、つまり、文書自体に設定されているもののみを使用します。スタイルによる書字方向、つまり、 {{cssxref("direction")}} のような CSS プロパティで設定された書字方向には対応しません。
> **Note:** `:dir()` 擬似クラスは `[dir=…]` [属性セレクター](/ja/docs/Web/CSS/Attribute_selectors)と等価ではないことに注意してください。後者は HTML の {{htmlattrxref("dir")}} 属性を選択しますが、これがない要素は、書字方向が親から継承されていても無視します。（同様に、 `[dir=rtl]` と `[dir=ltr]` は `auto` の値に一致しません。）それに対して、 `:dir()` は継承された場合も含め、{{glossary("user agent", "ユーザーエージェント")}}が計算した値で選択します。
> **Note:** HTML では、書字方向は {{htmlattrxref("dir")}} 属性で指定されます。他の文書型では異なる方法があるかもしれません。
## 構文
`:dir()` 擬似クラスは1つの引数を取り、対象としたい書字方向を指定します。
### 引数
- `ltr`
- : 書字方向が左書きの要素を対象とします。
- `rtl`
- : 書字方向が右書きの要素を対象とします。
### 形式文法
{{csssyntax}}
## 例
### 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;
}
```
### 結果
{{ EmbedLiveSample('Examples') }}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 言語に関連する擬似クラス: {{cssxref(":lang")}}, {{cssxref(":dir")}}
- HTML の {{htmlattrxref("lang")}} 属性
- HTML の {{htmlattrxref("translate")}} 属性
|
