:dir()

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Experimental: 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.

css
/* 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

Error: could not find syntax for this item

Ejemplo

HTML

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

CSS

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

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

Resultado

Especificaciones

Specification
HTML Standard
# selector-ltr
Selectors Level 4
# the-dir-pseudo

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también

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