A :dir()pseudo classe em CSS permite que os elementos sejam selecionados com base na direção da linguagem, conforme determinado na marcação HTML. Na verdade, existem apenas duas direções em que a linguagem pode fluir em um documento, que são da esquerda para a direita e da direita para a esquerda. Pense nisso como uma forma de estilizar elementos que são diferenciados pela direcionalidade de idioma diferente.
.item:dir(rtl) ( background: red; color: #fff; )A pseudoclasse aceita apenas um único valor e retornará nulo se mais de um valor for inserido.
Veja o Pen: pseudo-seletor dir de Geoff Graham (@geoffgraham) em CodePen.
:dir(rtl) vs. (dir=rtl)
Também podemos selecionar um elemento com base na direção de seu idioma, usando um seletor de consulta de correspondência:
.item(dir=rtl) ( background: red; color: #fff; )Isso realmente funciona, mas é diferente :dir(rtl)porque só seleciona um elemento pelo que está estritamente definido na marcação HTML. Por outro lado, :dir(rtl)irá detectar as preferências de idioma do agente do usuário e selecionar o elemento sem ser explicitamente declarado no HTML.
Isso é importante porque os elementos que não declaram explicitamente a direção do idioma herdarão o diratributo de seu ancestral mais próximo que o contém. Isso pode levar a um cenário em que o uso (dir=rtl)seleciona elementos adicionais do que você pretende.
Suporte para navegador
Os dados de suporte deste navegador são do Caniuse, que tem mais detalhes. Um número indica que o navegador oferece suporte ao recurso nessa versão e superior.
Área de Trabalho
| cromada | Raposa de fogo | IE | Beira | Safári |
|---|---|---|---|---|
| Não | 17 * | Não | Não | Não |
Celular / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| Não | 85 | Não | Não |
Mais Informações
- Especificação de nível 4 de seletores
- Problema do Chromium nº 576815
- Bug WebKit # 64861
- Documentação Mozilla
- Solicitação de recurso do Microsoft Edge
- Status da plataforma Chromium
- Polyfill
:dir()PostCSS