CSS :lang() Pseudo Classe

A pseudo-classe :lang() seleciona elementos com base no idioma em que estão escritos. Ela permite aplicar estilos diferentes a conteúdos em idiomas diferentes — por exemplo, aspas francesas para texto em francês e aspas inglesas para texto em inglês — a partir de uma única folha de estilos.

Esta página explica como o navegador determina o idioma de um elemento, como :lang() difere do seletor de atributo [lang], os problemas tipográficos que ela resolve e os pontos de atenção que você deve observar.

Como o idioma é determinado

Uma regra :lang(xx) corresponde a um elemento quando seu idioma é xx (ou uma sub-variante de xx). O navegador determina o idioma de um elemento a partir do ancestral mais próximo que o declara, usando, nesta ordem:

O atributo HTML lang, ex.: <html lang="it"> ou <p lang="fr">. Esta é a fonte mais comum. Veja códigos de idioma HTML para a lista completa de valores.
A declaração <meta> Content-Language.
O cabeçalho de resposta HTTP Content-Language enviado pelo servidor.

Os valores de idioma seguem o BCP 47: uma subtag primária como it (italiano) ou fr (francês), opcionalmente com uma subtag de região, como fr-CA para francês canadense ou en-GB para inglês britânico.

`:lang()` vs. o seletor de atributo `[lang]`

É tentador escrever [lang="fr"] em vez de :lang(fr), mas eles se comportam de forma diferente:

:lang(fr) é herdado. Ele corresponde a todo elemento dentro de uma região em francês, mesmo aqueles que não têm um atributo lang próprio, e também corresponde a sub-variantes — :lang(fr) também corresponde a lang="fr-CA".
[lang="fr"] corresponde apenas ao elemento exato que carrega literalmente lang="fr". Não corresponde a descendentes e não corresponde a lang="fr-CA".

Em resumo, use :lang() para estilizar conteúdo por idioma, e use o seletor de atributo apenas quando precisar especificamente corresponder à string do atributo em si.

/* Matches the <html> tag AND every element inside it,
   including lang="fr-CA". */
:lang(fr) {
  font-style: italic;
}

/* Matches ONLY an element with exactly lang="fr". */
[lang="fr"] {
  font-style: italic;
}

Quando eu usaria isso?

O caso de uso clássico são as aspas tipograficamente corretas para cada idioma. Idiomas diferentes usam glifos de aspas diferentes: o inglês usa "…" curvadas, o francês usa guillemets « … », o alemão usa „…". Combinando :lang() com a propriedade quotes e o elemento <q>, as marcas corretas aparecem automaticamente com base no idioma circundante. Outros usos incluem fontes específicas por idioma, espaçamento entre linhas ou hifenização (frequentemente combinados com font-language-override).

Sintaxe

:lang(language-code) {
  /* declarations */
}

language-code é uma única tag de idioma como en, fr ou fr-CA. A pseudo-classe é tipicamente anexada a ou combinada com um seletor de tipo, ex.: p:lang(fr) ou :lang(en) > q.

Exemplo: estilizando texto por idioma

A regra abaixo tem como alvo todo <p> que está em francês (lang="fr"), deixando os outros parágrafos intactos.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p:lang(fr) {
        background: #1c87c9;
        color: #eee;
      }
    </style>
  </head>
  <body>
    <p>I am from France.</p>
    <p lang="fr">Je m'appelle Ann</p>
  </body>
</html>

Experimente Você Mesmo »

Exemplo: aspas corretas por idioma

Aqui :lang() é combinado com o combinador filho (>) e a propriedade quotes para que cada <q> receba a pontuação que corresponde ao seu idioma — aspas inglesas retas dentro do bloco em inglês e guillemets franceses dentro do bloco em francês.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      :lang(en) > q {
        quotes: '\201C' '\201D' '\2018' '\2019';
      }
      :lang(fr) > q {
        quotes: '« ' ' »';
      }
    </style>
  </head>
  <body>
    <h2>:lang() selector example</h2>
    <div lang="en">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
    <div lang="fr">
      <q>Lorem ipsum is simply dummy text</q>
    </div>
  </body>
</html>

Experimente Você Mesmo »

Pontos de atenção comuns

O atributo lang deve estar presente. :lang() só funciona quando um idioma é de fato declarado em algum lugar na árvore. Se o seu documento não tem atributo lang, nada corresponde. Adicione <html lang="en"> (ou o código correto) à raiz da sua página.
Sub-tags correspondem, mas não o contrário. :lang(fr) corresponde a lang="fr-CA", mas :lang(fr-CA) não corresponde a um simples lang="fr". Use a tag ampla (fr) a menos que realmente precise de uma variante regional.
Não diferencia maiúsculas de minúsculas. :lang(EN) e lang="en" correspondem entre si; as tags de idioma são comparadas sem distinção de maiúsculas/minúsculas.

Suporte nos navegadores

:lang() com uma única tag de idioma é suportado em todos os navegadores modernos (e até o Internet Explorer 8). A forma mais nova com vírgula separando valores, :lang(en, fr), está disponível apenas em versões recentes dos navegadores, portanto use uma tag por seletor para maior compatibilidade.

Capítulos relacionados

CSS quotes — define as aspas usadas por <q> e content.
Seletores CSS — incluindo o seletor de atributo [lang].
CSS font-language-override — controla glifos específicos por idioma.
Códigos de idioma HTML — valores válidos para o atributo lang.

Prática

O que a pseudo-classe :lang faz no CSS?

Ela permite selecionar elementos com um atributo de idioma específico.Ela permite estilizar texto em um idioma específico.Ela permite traduzir texto de um idioma para outro.Ela permite aplicar estilos diferentes a partes diferentes do texto.Ela altera o idioma do texto.