CSS :dir() Pseudo Classe - Aprenda CSS

A pseudo-classe :dir() corresponde a elementos com base na direcionalidade do texto que contêm — ou seja, se o texto flui da esquerda para a direita (como o inglês) ou da direita para a esquerda (como o árabe ou o hebraico).

Isso é útil quando você constrói um layout que precisa se adaptar a ambas as direções: em vez de escrever regras separadas e alternar classes com JavaScript, você deixa o navegador estilizar cada elemento de acordo com a direção de texto resolvida.

A pseudo-classe :dir() não examina nenhum estado estilístico — ela lê a direcionalidade que o próprio documento resolve para o elemento. Essa direção vem do atributo HTML dir, que pode ser definido como ltr, rtl ou auto, ou é herdado de um ancestral.

O seletor aceita um de dois valores:

:dir(ltr) corresponde a elementos cuja direcionalidade resolvida é da esquerda para a direita.
:dir(rtl) corresponde a elementos cuja direcionalidade resolvida é da direita para a esquerda.

Qualquer outro valor é inválido e o seletor simplesmente não corresponde. Note que :dir(rtl) corresponde com base na direção resolvida, portanto um elemento definido como dir="auto" cujo primeiro caractere forte seja árabe será correspondido por :dir(rtl).

:dir(rtl) vs. [dir=rtl]

É tentador usar o seletor de atributo [dir=rtl] no lugar, mas os dois se comportam de maneira diferente:

[dir=rtl] corresponde apenas quando o atributo dir está literalmente escrito naquele elemento na marcação.
:dir(rtl) corresponde sempre que a direcionalidade do elemento resolve para direita para esquerda — mesmo que dir seja herdado de um ancestral ou calculado a partir de dir="auto".

Elementos sem um dir explícito herdam a direcionalidade do seu ancestral mais próximo que o possui. Nesse caso, [dir=rtl] não corresponde ao filho que herda (o atributo não está nele), enquanto :dir(rtl) corresponde. Prefira :dir() quando quiser seguir a direção efetiva em vez do atributo bruto.

O lado negativo é o suporte dos navegadores: :dir() é mais recente, então quando você precisar de um fallback para mecanismos muito antigos, o seletor de atributo é a aposta mais segura.

Versão

Selectors Level 4

Sintaxe

CSS :dir() syntax

:dir(ltr) {
  css declarations
}

Exemplo do seletor :dir():

CSS :dir() code example

<!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>

Experimente Você Mesmo »

Aqui, o <div dir="rtl"> externo torna seu bloco da direita para a esquerda, então ele é estilizado em verde por div:dir(rtl). O <div dir="ltr"> interno substitui isso para esquerda para direita e é estilizado em azul por div:dir(ltr). O <div dir="auto"> mais interno contém texto árabe, então sua direção resolve para direita para esquerda e ele também fica verde — algo que [dir=rtl] nunca conseguiria capturar.

Herdando a direção sem repetir o atributo

Um uso prático de :dir() é estilizar conteúdo profundamente aninhado onde apenas um ancestral carrega o atributo dir. Cada parágrafo abaixo herda rtl, mas nenhum deles o 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 funcionaria aqui apenas porque o ancestral é correspondido primeiro, mas p[dir=rtl] não corresponderia a nada — os parágrafos nunca carregam o atributo. p:dir(rtl) os corresponde diretamente. Combiná-lo com propriedades lógicas como border-inline-start mantém o design correto em ambas as direções automaticamente.

Nota

Esta pseudo-classe é suportada por todos os navegadores modernos, incluindo Chrome, Edge, Safari e Firefox.

Conceitos relacionados

Propriedade CSS direction — define a direção do texto diretamente no CSS.
Pseudo-classe CSS :lang() — seleciona elementos por idioma, o que frequentemente anda de mãos dadas com a direção.
Seletores CSS — a lista completa de seletores que você pode combinar com :dir().

Prática

Qual é o propósito da propriedade 'dir' no CSS?

Permite ao usuário especificar a direção do texto.Altera a cor de fundo do texto.É usada para alinhar o texto.Pode decidir se o texto deve ser renderizado da direita para a esquerda ou da esquerda para a direita.