mozilla

Revision 424653 of :dir

  • リビジョンの URL スラグ: Web/CSS/:dir
  • リビジョンのタイトル: :dir
  • リビジョンの ID: 424653
  • 作成日:
  • 作成者: sosleepy
  • 現行リビジョン はい
  • コメント 翻訳開始

このリビジョンの内容

{{CSSRef()}}

{{SeeCompatTable()}}

概要

CSS 擬似クラスである :dir は、要素に含まれるテキストの方向にマッチします。HTML では方向は {{ htmlattrxref("dir", "html") }} 属性から判断されます。他の文書タイプには、言語を判断する別の方法があるかもしれません。

擬似クラス :dir() を使うのと、 [dir=…] 属性セレクタを使うのとは同じでないことに注意してください。後者は {{ htmlattrxref("dir", "html") }} の値にマッチしますが、属性がセットされていなければ、要素が親要素の値を継承していてもマッチしません。同様に[dir=rtl][dir=ltr] は、dir 属性に auto 値が使われているとマッチしません。一方、:dir() はユーザーエージェントの計算値、継承値、もしくは auto 値にマッチします。

:dir() はまた、ほとんどの HTML 文書で定義される、{{gengoheiki("文書構造上の意味を持つ","semantic")}}方向値だけを判断材料にします。{{ cssxref("direction") }} のような CSS プロパティでセットされる、{{gengoheiki("文体装飾としての","stylistic")}} 方向は判断材料としません。

構文

element:dir(directionality) { CSS プロパティ }

ここで directionality は ltr または rtl です。

<div dir="rtl">
  <span>test1</span>
  <div dir="ltr">test2
    <div dir="auto">עִבְרִית</div>
  </div>
</div>

この例の :dir(rtl) は、最上位階層の div、test1 を含む span、そしてヘブライ語の文字を含む div にマッチします。:dir(ltr)test2 を含む div にマッチします。

仕様

仕様書 策定状況 コメント
{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }} {{ Spec2('CSS4 Selectors') }} 初回定義

ブラウザ対応状況

{{ CompatibilityTable() }}

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari
基本サポート {{ CompatNo() }} {{ CompatGeckoDesktop("17") }}
{{ CompatGeckoDesktop("18") }} {{ property_prefix("-moz") }}
{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート {{ CompatNo() }} {{ CompatGeckoMobile("17") }}
{{ CompatGeckoMobile("18") }} {{ property_prefix("-moz") }}
{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
  • 言語に関連する擬似クラス: {{ cssxref(":lang") }}, {{ cssxref(":dir") }}

このリビジョンのソースコード

<p>{{CSSRef()}}</p>
<p>{{SeeCompatTable()}}</p>
<h2 id="Summary" name="Summary">概要</h2>
<p>CSS <a href="/ja/CSS/Pseudo-classes" title="Pseudo-classes">擬似クラス</a>である <code>:dir</code> は、要素に含まれるテキストの方向にマッチします。HTML では方向は {{ htmlattrxref("dir", "html") }} 属性から判断されます。他の文書タイプには、言語を判断する別の方法があるかもしれません。</p>
<p>擬似クラス <code>:dir()</code> を使うのと、 <code>[dir=…]</code> 属性セレクタを使うのとは同じでないことに注意してください。後者は {{ htmlattrxref("dir", "html") }} の値にマッチしますが、属性がセットされていなければ、要素が親要素の値を継承していてもマッチしません。同様に<code>[dir=rtl]</code> や <code>[dir=ltr]</code> は、<code>dir </code>属性に <code>auto</code> 値が使われているとマッチしません。一方、<code>:dir()</code> はユーザーエージェントの計算値、継承値、もしくは <code>auto</code> 値にマッチします。</p>
<p><code>:dir()</code> はまた、ほとんどの HTML 文書で定義される、{{gengoheiki("文書構造上の意味を持つ","semantic")}}方向値だけを判断材料にします。{{ cssxref("direction") }} のような CSS プロパティでセットされる、{{gengoheiki("文体装飾としての","stylistic")}} 方向は判断材料としません。</p>
<h2 id="Syntax" name="Syntax">構文</h2>
<pre>
element:dir(<em>directionality</em>) { CSS プロパティ }
</pre>
<p>ここで directionality は ltr または rtl です。</p>
<h2 id="Examples" name="Examples">例</h2>
<pre class="brush:html;">
&lt;div dir="rtl"&gt;
  &lt;span&gt;test1&lt;/span&gt;
  &lt;div dir="ltr"&gt;test2
    &lt;div dir="auto"&gt;עִבְרִית&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>
<p>この例の <code>:dir(rtl)</code> は、最上位階層の div、<code>test1 </code>を含む span、そしてヘブライ語の文字を含む div にマッチします。<code>:dir(ltr)</code> は <code>test2</code> を含む div にマッチします。</p>
<h2 id="Specifications" name="Specifications">仕様</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">仕様書</th>
      <th scope="col">策定状況</th>
      <th scope="col">コメント</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>初回定義</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザ対応状況</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("17") }}<br />
          {{ CompatGeckoDesktop("18") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>機能</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>基本サポート</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("17") }}<br />
          {{ CompatGeckoMobile("18") }} {{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Related_Pages" name="Related_Pages">関連情報</h2>
<ul>
  <li>言語に関連する擬似クラス: {{ cssxref(":lang") }}, {{ cssxref(":dir") }}</li>
</ul>
このリビジョンへ戻す