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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
:dir()
Experimental
Chrome No support NoEdge No support NoFirefox Full support 49
Full support 49
No support 17 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 49
Full support 49
No support 17 — 53
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Vegeu també

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

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, SphinxKnight, Legioinvicta
Last updated by: mdnwebdocs-bot,