CSS :dir() Pseudoclase
La pseudoclase :dir() de CSS selecciona elementos según la direccionalidad del texto. Lee sobre ella y prueba ejemplos.
La pseudoclase :dir() selecciona elementos según la direccionalidad del texto que contienen — es decir, si el texto fluye de izquierda a derecha (como el inglés) o de derecha a izquierda (como el árabe o el hebreo).
Esto resulta útil cuando construyes un diseño que debe adaptarse a ambas direcciones: en lugar de escribir reglas separadas y alternar clases desde JavaScript, dejas que el navegador aplique estilos a cada elemento según la dirección de texto resuelta.
La pseudoclase :dir() no examina ningún estado estilístico — lee la direccionalidad que el propio documento resuelve para el elemento. Esa dirección proviene del atributo HTML dir, que puede establecerse en ltr, rtl o auto, o bien se hereda de un ancestro.
El selector acepta uno de dos valores:
:dir(ltr)selecciona los elementos cuya direccionalidad resuelta es de izquierda a derecha.:dir(rtl)selecciona los elementos cuya direccionalidad resuelta es de derecha a izquierda.
Cualquier otro valor es inválido y el selector simplemente no coincidirá. Ten en cuenta que :dir(rtl) coincide según la dirección resuelta, por lo que un elemento con dir="auto" cuyo primer carácter fuerte sea árabe será seleccionado por :dir(rtl).
:dir(rtl) vs. [dir=rtl]
Es tentador usar el selector de atributo [dir=rtl] en su lugar, pero los dos se comportan de manera diferente:
[dir=rtl]solo coincide cuando el atributodirestá escrito literalmente en ese elemento en el marcado.:dir(rtl)coincide siempre que la direccionalidad del elemento se resuelva como de derecha a izquierda — incluso sidirse hereda de un ancestro o se calcula a partir dedir="auto".
Los elementos sin un dir explícito heredan la direccionalidad del ancestro más cercano que lo tenga. En ese caso, [dir=rtl] no selecciona al hijo heredero (el atributo no está en él), mientras que :dir(rtl) sí lo hace. Prefiere :dir() cuando quieras seguir la dirección efectiva en lugar del atributo sin procesar.
El aspecto negativo es la compatibilidad con navegadores: :dir() es más reciente, por lo que cuando necesitas un fallback para motores muy antiguos, el selector de atributo es la opción más segura.
Versión
Sintaxis
Sintaxis CSS :dir()
:dir(ltr) {
css declarations
}Ejemplo del selector :dir():
Ejemplo de código CSS :dir()
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div:dir(ltr) {
background-color: #1c87c9;
}
div:dir(rtl) {
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>:dir() selector example</h2>
<div dir="rtl">
<span>example1</span>
<div dir="ltr">
example2
<div dir="auto"> ففي </div>
</div>
</div>
</body>
</html>Aquí el <div dir="rtl"> exterior hace que su bloque sea de derecha a izquierda, por lo que se estiliza en verde con div:dir(rtl). El <div dir="ltr"> interior anula eso a izquierda a derecha y se estiliza en azul con div:dir(ltr). El <div dir="auto"> más interno contiene texto árabe, por lo que su dirección se resuelve como de derecha a izquierda y también se vuelve verde — algo que [dir=rtl] nunca podría capturar.
Herencia de la dirección sin repetir el atributo
Un uso práctico de :dir() es aplicar estilos a contenido profundamente anidado donde solo un ancestro lleva el atributo dir. Cada párrafo a continuación hereda rtl, pero ninguno lo declara:
<!DOCTYPE html>
<html>
<head>
<title>Inherited direction</title>
<style>
p:dir(rtl) {
border-inline-start: 4px solid #8ebf42;
padding-inline-start: 10px;
}
</style>
</head>
<body dir="rtl">
<article>
<p>مرحبا بالعالم</p>
<p>هذه فقرة أخرى</p>
</article>
</body>
</html>[dir=rtl] p funcionaría aquí solo porque el ancestro coincide primero, pero p[dir=rtl] no coincidiría con nada — los párrafos nunca llevan el atributo. p:dir(rtl) los selecciona directamente. Combinarlo con propiedades lógicas como border-inline-start mantiene el diseño correcto en ambas direcciones de forma automática.
Esta pseudoclase es compatible con todos los navegadores modernos, incluyendo Chrome, Edge, Safari y Firefox.
Conceptos relacionados
- Propiedad CSS
direction— establece la dirección del texto directamente en CSS. - Pseudoclase CSS
:lang()— selecciona elementos por idioma, lo cual suele ir de la mano con la dirección. - Selectores CSS — la lista completa de selectores que puedes combinar con
:dir().