Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.

La pseudo-clase :dir de CSS coincide con los elementos en función de la direccionalidad del texto contenido en ellos.

/* Selecciona cualquier elemento con texto de derecha a izquierda */
:dir(rtl) {
  background-color: red;
}

La pseudo-clase :dir() usa solo el valor semántico de la direccionalidad, es decir, el definido en el documento mismo. No tiene en cuenta la direccionalidad del estilo, es decir, la direccionalidad establecida por las propiedades de CSS como direction.

Nota: Tenga en cuenta que el comportamiento de la pseudo-clase :dir() no es equivalente a los selectores de atributo [dir=...]. Estos últimos coinciden con el atributo HTML dir e ignoran los elementos que carecen de él, incluso si heredan una dirección de su padre. (De forma similar, [dir=rtl] y [dir=ltr] no coincidirán con el valor auto.) En contraste, :dir() coincidirá con el valor calculado por user agent, incluso si se hereda.

Nota: En HTML, la dirección está determinada por el atributo dir . Otros tipos de documentos pueden tener diferentes métodos.

Sintaxis

La pseudoclase :dir() requiere un parámetro, que representa la direccionalidad de texto que desea orientar.

Parámetros

ltr
Orientar elementos de izquierda a derecha.
rtl
Orientar elementos de derecha a izquierda.

Sintaxis formal

:dir( ltr | rtl )

Ejemplo

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;
}

Resultado

Especificaciones

Especificación Estado Comentario
HTML Living Standard
La definición de ':dir(ltr)' en esta especificación.
Living Standard Ningún cambio.
Selectors Level 4
La definición de ':dir()' en esta especificación.
Working Draft Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básico
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 49
Soporte completo 49
Sin soporte 17 — 53
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoEdge Mobile Sin soporte NoFirefox Android Soporte completo 49
Soporte completo 49
Sin soporte 17 — 53
Prefijado
Prefijado Requiere de un prefijo de vendedor : -moz-
Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.
Requiere de un prefijo de proveedor o un de nombre diferente para su uso.

 

Ver también

  • Pseudo-clases relacionadas con el idioma: :lang, :dir

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, pekechis
Última actualización por: lajaso,