:dir

  • Revision slug: CSS/:dir
  • Revision title: :dir
  • Revision id: 297008
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

Summary

The :dir CSS pseudo-class matches elements based on the directioality of the text contained in it. In HTML, the direction is determined by the {{ htmlattrxref("dir", "html") }} attribute. For other document types there may be other document methods for determining the language.

Note that the usage of the pseudo-class :dir() is not equivalent of using the [dir=…] attribute selectors. The latter

Syntax

element:dir(directionality) { style properties } where directionality is ltr or rtl.

Examples

Specifications

Specification Status Comment
{{ SpecName('CSS4 Selectors', '#lang-dir', ':dir()') }} {{ Spec2('CSS4 Selectors') }} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatNo() }} {{ CompatGeckoDesktop("17") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }} {{ CompatGeckoMobile("17") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
  • Language-related pseudo-classes: {{ cssxref(":lang") }}, {{ cssxref(":dir") }}

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<p>The <code>:dir</code> CSS <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> matches elements based on the directioality of the text contained in it. In HTML, the direction is determined by the {{ htmlattrxref("dir", "html") }} attribute. For other document types there may be other document methods for determining the language.</p>
<p>Note that the usage of the pseudo-class <code>:dir()</code> is not equivalent of using the <code>[dir=…]</code> attribute selectors. The latter</p>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="eval">
element:dir(<em>directionality</em>) { <em>style properties</em> } where <em>directionality</em> is ltr or rtl.
</pre>
<h2 id="Examples" name="Examples">Examples</h2>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#lang-dir', ':dir()') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>Initial definition.</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("17") }}</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>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoMobile("17") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h2 id="Related_Pages" name="Related_Pages">See also</h2>
<ul>
  <li>Language-related pseudo-classes: {{ cssxref(":lang") }}, {{ cssxref(":dir") }}</li>
</ul>
Revert to this revision