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

Resumen

La pseudo-class CSS :dir sirve para seleccionar elementos basándonos en la direccionalidad de los textos que contienen. En HTML, la dirección viene determinada por el atributo dir . Para otros tipos de documentos puede que haya otros métodos para determinar el lenguage.

Destacar que el uso de la pseudo-class :dir() no es equivalente al uso de los selectores de atributo [dir=…]. Este último selecciona un valor del dir y no hace ninguna selección si el atributo no está establecido,incluso si en ese caso el elemento hereda se su padre; de manera similar [dir=rtl] or [dir=ltr] no serán seleccionados con un valor auto  que puede ser usado en el atributo dir. Por el contrario, :dir() seleccionará el valor calculado por el UA, siendo heredado o con un valor auto.

De igual manera :dir() sólo considera el valor semántico  de la direccionalidad, aquel definido en el documento, la mayoría del tiempo en HTML. No tiene en cuenta la direccionalidad establecida con estilo, aquella fijada con propiedades CSS como direction que son puramento estilísticas.

Síntaxis

/* element:dir(directionalidad) { propiedades de estilo}
   donde la direccionalidad es ltr o rtl */

div:dir(ltr) { /* propiedades de estilo */ }
span:dir(rtl) { /* propiedades de estilo */ }

Ejemplos

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

En este ejemplo :dir(rtl) seleccionará el div de nivel superior, el span que contiene test1, y el div con los caracteres en hebreo. :dir(ltr) seleccionará el div que contienetest2.

Especificaciones

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

Compatibilidad con los distintos navegadores.

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!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico Sin soporte 17 (17) -moz Sin soporte Sin soporte Sin soporte
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico Sin soporte 17.0 (17) -moz Sin soporte Sin soporte Sin soporte

Ver además

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

Etiquetas y colaboradores del documento

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