:dir se usa para seleccionar y cambiar las propiedades del elemento de texto que tiene dirección de izquierda a derecha o de derecha a izquierda.
Sintaxis:
:dir(ltr|rtl)
Parámetros: Acepta los siguientes dos parámetros.
- ltr: esta palabra clave básicamente busca elementos que tengan una dirección de izquierda a derecha.
- rtl: esta palabra clave básicamente busca elementos que tengan una dirección de derecha a izquierda.
Nota: Ejecute el código en el navegador Firefox.
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
color:#fff;
width: 300px;
font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva,
Verdana, sans-serif;
font-size: 20px;
padding-top: 5px;
}
:dir(rtl) {
background-color: black;
}
:dir(ltr) {
background-color: green;
}
</style>
<body>
<div dir="rtl">
Geeks for geeks
</div>
<div dir="ltr">
Geeks for geeks
<div dir="rtl">???? ?? ??? ????</div>
</div>
</body>
</html>
Producción:
Ejemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
color:#fff;
width: 300px;
font-family: 'Lucida Sans', 'Lucida Sans Regular',
'Lucida Grande', 'Lucida Sans Unicode', Geneva,
Verdana, sans-serif;
font-size: 20px;
padding-top: 5px;
}
h1{
color: #000;
}
:dir(rtl) {
background-color: green;
}
</style>
<body>
<h1>dir="auto"</h1>
<div dir="auto">???? ?? ??? ????</div>
</body>
</html>
Producción:
Navegadores compatibles:
- Firefox