El :lang()selector de pseudo clases en CSS hace coincidir elementos en función del contexto de su atributo de idioma dado. El lenguaje en HTML se determina mediante una combinación del lang=""atributo, el elemento y la información del protocolo, como el campo de Accept-Languageencabezado de solicitud HTTP 1 . Las cadenas de código de idioma aceptables se especifican en la especificación HTML 4.0.
:lang(language-code) ( // whatever styling ):lang(X)coincide si el elemento está en el idioma X. Si el emparejamiento se basa únicamente en que el identificador X es igual o una subcadena separada por guiones del valor del idioma del elemento, de la misma manera que si se realizara con "| =" operador. La comparación de X con el valor de idioma del elemento se realiza sin distinción entre mayúsculas y minúsculas para los caracteres dentro del rango ASCII. El identificador X no tiene que ser un nombre de idioma válido. Es importante tener en cuenta que el :langselector se puede usar globalmente o específicamente en cualquier elemento dado. Siéntase libre de usar selectores descendientes o la :lang(language-code)pseudoclase solo.
Ejemplo
Usando el langatributo en nuestro elemento raíz (es decir, ) podemos reemplazar las comillas dependiendo del 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 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.
Francés (fr)
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.
Alemán (de)
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.
El atributo de idioma no se puede aplicar a los siguientes elementos:
- applet
- base
- fuente base
- br
- cuadro
- marco
- iframe
- param
- texto
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| sí | sí | sí | sí | sí | sí | sí |
:lang(X) es una recomendación de la especificación CSS Nivel 2 Revisión 1 y originalmente recomendada como parte de la especificación CSS Nivel 2.
1 Los campos de encabezado HTTP son componentes del encabezado del mensaje de solicitudes y respuestas en el Protocolo de transferencia de hipertexto (HTTP). Definen los parámetros operativos de una transacción HTTP. El Accept-Languagecampo de encabezado de solicitud es similar a Aceptar, pero restringe el conjunto de lenguajes naturales que se prefieren como respuesta a la solicitud.