La :dir()pseudoclase en CSS permite que los elementos se seleccionen según la dirección del lenguaje, como se determina en el marcado HTML. En realidad, solo hay dos direcciones en las que el lenguaje puede fluir en un documento, que son de izquierda a derecha y de derecha a izquierda. Piense en esto como una forma de diseñar elementos que se distinguen por una diferente direccionalidad del lenguaje.
.item:dir(rtl) ( background: red; color: #fff; )La pseudoclase solo acepta un único valor y devolverá nulo si se ingresa más de un valor.
Vea el pseudo-selector Pen: dir de Geoff Graham (@geoffgraham) en CodePen.
:dir(rtl) vs. (dir=rtl)
También podemos seleccionar un elemento en función de la dirección de su idioma haciendo uso de un selector de consulta de coincidencia:
.item(dir=rtl) ( background: red; color: #fff; )Eso sí funciona, pero es diferente :dir(rtl)en que solo selecciona un elemento por lo que está estrictamente definido en el marcado HTML. Por otro lado, :dir(rtl)detectará las preferencias de idioma del agente de usuario y seleccionará el elemento sin que se indique explícitamente en el HTML.
Esto es muy importante porque los elementos que no establecen explícitamente la dirección del idioma heredarán el diratributo de su antepasado más cercano que lo contiene. Eso puede llevar a un escenario en el que el uso (dir=rtl)selecciona elementos adicionales de los que desea.
Soporte del navegador
Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.
Escritorio
| Cromo | Firefox | ES DECIR | Borde | Safari |
|---|---|---|---|---|
| No | 17 * | No | No | No |
Móvil / Tablet
| Android Chrome | Android Firefox | Androide | Safari de iOS |
|---|---|---|---|
| No | 85 | No | No |
Más información
- Especificación de selectores de nivel 4
- Número de cromo n.o 576815
- Error de WebKit # 64861
- Documentación de Mozilla
- Solicitud de funciones de Microsoft Edge
- Estado de la plataforma de Chromium
- PostCSS
:dir()polyfill