Pseudo-classe CSS :dir()
A pseudo-classe CSS :dir() seleciona elementos com base na direção do texto. Saiba mais sobre a pseudo-classe e experimente os exemplos.
A pseudo-classe :dir() seleciona elementos com base na direção do texto que contêm.
A pseudo-classe :dir() não seleciona com base em estados estilísticos, razão pela qual a direção de um elemento tem de ser especificada no documento.
Em HTML5, a direção de um elemento pode ser especificada utilizando o atributo dir.
O seletor :dir() pode ter os valores "ltr" ou "rtl".
A pseudo-classe :dir(ltr) seleciona elementos que têm uma direção da esquerda para a direita. A pseudo-classe :dir(rtl) seleciona elementos que têm uma direção da direita para a esquerda. Outros valores são inválidos.
:dir(rtl) vs. [dir=rtl]
Existe uma diferença entre :dir(rtl) e [dir=rtl]. [dir=rtl] só seleciona um elemento se o atributo estiver estritamente definido na marcação HTML. :dir(rtl) seleciona o elemento mesmo que a direção não seja indicada explicitamente no HTML. Os elementos sem uma direção explícita herdam o atributo dir do seu antecessor mais próximo que o contenha. Nestes casos, [dir=rtl] não seleciona os elementos herdados, enquanto :dir(rtl) seleciona.
Versão
Sintaxe
Sintaxe CSS :dir()
:dir(ltr) {
css declarations
}Exemplo do seletor :dir():
Exemplo 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>Esta pseudo-classe é suportada por todos os browsers modernos, incluindo o Chrome, o Edge, o Safari e o Firefox.