:dir

  • Raccourci de la révision : CSS/:dir
  • Titre de la révision : :dir
  • ID de la révision : 448335
  • Créé :
  • Créateur : FredB
  • Version actuelle ? Non
  • Commentaire

Contenu de la révision

{{ CSSRef() }}

{{ SeeCompatTable() }}

Résumé

La pseudo-classe CSS :dir cible les éléments selon la direction du texte qu'ils contiennent. En HTML, la direction est déterminée par l'attribut {{ htmlattrxref("dir", "html") }}. Pour d'autres types de documents, il peut y avoir d'autres méthodes pour déterminer la langue.

Notez que l'utilisation de la pseudo-classe :dir() n'est pas équivalente à l'utilisation des sélecteurs d'attributs [dir=…]. Le dernier cible la valeur de l'attribut {{ htmlattrxref("dir", "html") }} et ne cible rien quand aucun attribut n'est défini, même si dans ce cas, l'élément hérite de la valeur de son élément parent. De même [dir=rtl] ou [dir=ltr] ne cibleront pas la valeur auto qui peut être utilisée sur l'attribut dir. À l'opposé, :dir() ciblera les valeurs calculées par le navigateur, qu'elles soient héritées ou de la valeur auto.

De plus :dir() considère seulemement la valeur sémantique de la direction, celle définie dans le document, la plupart du temps dans le HTML. La direction donnée par la des propriétés CSS comme {{ cssxref("direction") }} n'est pas considérée, cette valeur étant purement décorative.

Syntaxe

element:dir(direction) { propriétés décoratives } où direction est gauche à droite ou droite à gauche.

Exemples

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

Dans cet exemple :dir(rtl) cible le div de niveau le plus haut, le span contenant test1, et le div contenant les caractères en Hébreux. :dir(ltr) cible le div contenant test2.

Spécifications

Spécification État Commentaires
{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }} {{ Spec2('CSS4 Selectors') }} Définition initiale.

Compatibilité des navigateurs

{{ CompatibilityTable() }}

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support de base {{ CompatNo() }} {{ CompatGeckoDesktop("17") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support de base {{ CompatNo() }} {{ CompatGeckoMobile("17") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
  • Pseudo-classes liées aux langues : {{ cssxref(":lang") }}, {{ cssxref(":dir") }}

Source de la révision

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="R.C3.A9sum.C3.A9">Résumé</h2>
<p>La pseudo-classe <a href="/fr/docs/CSS" title="/fr/docs/CSS">CSS</a> <code>:dir</code> cible les éléments selon la direction du texte qu'ils contiennent. En HTML, la direction est déterminée par l'attribut {{ htmlattrxref("dir", "html") }}. Pour d'autres types de documents, il peut y avoir d'autres méthodes pour déterminer la langue.</p>
<p>Notez que l'utilisation de la pseudo-classe <code>:dir()</code> n'est pas équivalente à l'utilisation des sélecteurs d'attributs <code>[dir=…]</code>. Le dernier cible la valeur de l'attribut {{ htmlattrxref("dir", "html") }} et ne cible rien quand aucun attribut n'est défini, même si dans ce cas, l'élément hérite de la valeur de son élément parent. De même <code>[dir=rtl]</code> ou <code>[dir=ltr]</code> ne cibleront pas la valeur <code>auto</code> qui peut être utilisée sur l'attribut <code>dir</code>. À l'opposé, <code>:dir()</code> ciblera les valeurs calculées par le navigateur, qu'elles soient héritées ou de la valeur <code>auto</code>.</p>
<p>De plus <code>:dir()</code> considère seulemement la valeur <em>sémantique</em> de la direction, celle définie dans le document, la plupart du temps dans le HTML. La direction donnée par la des propriétés CSS comme {{ cssxref("direction") }} n'est pas considérée, cette valeur étant purement décorative.</p>
<h2 id="Syntax" name="Syntax">Syntaxe</h2>
<pre class="syntaxbox">
element:dir(<em>direction</em>) { <em>propriétés décoratives </em>} où <em>direction</em> est gauche à droite ou droite à gauche.
</pre>
<h2 id="Examples" name="Examples">Exemples</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>Dans cet exemple <code>:dir(rtl)</code> cible le div de niveau le plus haut, le span contenant <code>test1</code>, et le div contenant les caractères en Hébreux. <code>:dir(ltr)</code> cible le div contenant <code>test2.</code></p>
<h2 id="Sp.C3.A9cifications">Spécifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Spécification</th>
      <th scope="col">État</th>
      <th scope="col">Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS4 Selectors', '#the-dir-pseudo', ':dir()') }}</td>
      <td>{{ Spec2('CSS4 Selectors') }}</td>
      <td>Définition initiale.</td>
    </tr>
  </tbody>
</table>
<h2 id="Compatibilit.C3.A9_des_navigateurs">Compatibilité des navigateurs</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Fonction</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Support de base</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>Fonction</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Mobile</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Support de base</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">Voir également</h2>
<ul>
  <li>Pseudo-classes liées aux langues : {{ cssxref(":lang") }}, {{ cssxref(":dir") }}</li>
</ul>
Revenir à cette révision