We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

This translation is incomplete. Please help translate this article from English.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

La pseudo-class CSS  :dir() coincideix amb elements basats en la direccionalidad del text contingut en ells

/* Selecciona qualsevol element amb text de dreta a esquerra */
:dir(rtl) {
  background-color: red;
}

La pseudo-class :dir() utilitza només el valor semàntic de la direccionalitat, és a dir, el definit en el mateix document. No té en compte la direccionalitat de l'estil, és a dir, la direccionalitat establerta per les propietats CSS com direction.

Nota: Tingueu en compte que el comportament de la pseudo-class :dir() no és equivalent als selectors d'atribut [dir=…]. Aquest últim coincideix amb l'atribut HTML dir, i ignora els elements que no ho tenen, fins i tot si hereten una direcció del seu pare. (De la mateixa manera, [dir=rtl] i [dir=ltr] no coincideixen amb el valor auto.) En canvi, :dir() coincideix amb el valor calculat pel user agent, fins i tot si s'hereta.

Nota: En HTML, la direcció està determinada per l'atribut dir. Altres tipus de document poden tenir mètodes diferents.

Sintaxi

La pseudo-class :dir() requereix un paràmetre, que representa la direccionalitat de text que voleu orientar.

Parametres

ltr
Direcciona els elements d'esquerra a dreta.
rtl
Direcciona els elements de dreta a esquerra.

Sintaxi formal

:dir( ltr | rtl )

Exemple

HTML

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

CSS

:dir(ltr) {
  background-color: yellow;
}

:dir(rtl) {
  background-color: powderblue;
}

Resultat

Especificacions

Especificació Estat Comentari
HTML Living Standard
The definition of ':dir(ltr)' in that specification.
Living Standard Sense camvis.
Selectors Level 4
The definition of ':dir()' in that specification.
Working Draft Definició inicial

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Firefox (Gecko) Internet Explorer Edge Opera Safari
Suport bàsic No support[1] 17 (17) -moz
49 (49)[2]
No support No support[3] No support[1] No support[4]
Descripció Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic No support[1] 17.0 (17) -moz
49.0 (49)[2]
No support No support No support[4]

[1] Aquesta funció no s'ha implementat encara. Veure Chromium errada 576815.

[2] Atès que la propietat estandarditzada s'implementa des Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46), la variant prefixada -moz va ser eliminada en Gecko 53.0 (Firefox 53.0 / Thunderbird 53.0 / SeaMonkey 2.50).

[3] Microsoft Edge Sol.licitud de caraterística en UserVoice.

[4] Aquesta funció no s'ha implementat encara. Veure WebKit errada 64861.

Vegeu també

  • pseudo-classes relacionades amb el llenguatge: :lang, :dir

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,