O :lang()seletor de pseudo classe em CSS combina elementos com base no contexto de seu atributo de idioma fornecido. A linguagem em HTML é determinada por uma combinação do lang=""atributo, o elemento e por informações do protocolo, como o campo 1 doAccept-Language cabeçalho de solicitação HTTP . As cadeias de caracteres de código de idioma aceitáveis são especificadas na especificação HTML 4.0.
:lang(language-code) ( // whatever styling ):lang(X)corresponde se o elemento estiver no idioma X. Se a correspondência é baseada somente no identificador X ser igual ou uma substring separada por hífen do valor de idioma do elemento, da mesma forma como se realizada pelo “| =“ operador. A correspondência de X com o valor de idioma do elemento é executada sem distinção entre maiúsculas e minúsculas para caracteres dentro do intervalo ASCII. O identificador X não precisa ser um nome de idioma válido. É importante observar que o :langseletor pode ser usado globalmente ou especificamente em qualquer elemento. Sinta-se à vontade para usar seletores descendentes ou a :lang(language-code)pseudo classe sozinho.
Exemplo
Usando o langatributo em nosso elemento raiz (ou seja, ) podemos substituir aspas dependendo do idioma especificado.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
q:before ( content: open-quote; ) q:after ( content: close-quote; ) :lang(en) q ( quotes: '“' '”'; ) :lang(fr) q ( quotes: '«' '»'; ) :lang(de) q ( quotes: '»' '«'; )Inglês (en)
Pellentesque habitant morbi tristique senectus et netus et maleuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Ultricies eneanas mi vitae est. Mauris placerat eleifend leo.
Francês (fr)
Pellentesque habitant morbi tristique senectus et netus et maleuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Ultricies eneanas mi vitae est. Mauris placerat eleifend leo.
Alemão (de)
Pellentesque habitant morbi tristique senectus et netus et maleuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Ultricies eneanas mi vitae est. Mauris placerat eleifend leo.
O atributo language não pode ser aplicado aos seguintes elementos:
- applet
- base
- base
- br
- quadro
- conjunto de molduras
- iframe
- param
- roteiro
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sim | Sim | Sim | Sim | Sim | Sim | Sim |
:lang(X) é uma recomendação da especificação CSS Nível 2 Revisão 1 e originalmente recomendada como parte da especificação CSS Nível 2.
1 Os campos de cabeçalho HTTP são componentes do cabeçalho da mensagem de solicitações e respostas no Hypertext Transfer Protocol (HTTP). Eles definem os parâmetros operacionais de uma transação HTTP. O Accept-Languagecampo do cabeçalho da solicitação é semelhante a Aceitar, mas restringe o conjunto de linguagens naturais que são preferidas como resposta à solicitação.