La pseudo-clase :lang() de CSS es utilizada para modificar elementos en función del idioma en el que se determina que están.

/* Selecciona cualquier <p> en inglés (en) */
p:lang(en) {
  quotes: '\201C' '\201D' '\2018' '\2019';
}

Nota: En HTML, el lenguaje está determinado por una combinación del atributo lang, el elemento <meta> y posiblemente por la información del protocolo (como los encabezados HTTP). Para otros tipos de documentos, puede haber otros métodos de documentos para determinar el idioma.

Sintaxis

Sintaxis formal

:lang( <language-code> )

Parámetro

<language-code>
Un <string> que representa el idioma que desea orientar. Los valores aceptables se especifican en las especificaciones HTML.

Ejemplo

En este ejemplo, la pseudo-clase :lang() se usa para hacer coincidir los elementos primarios de los elementos de cita (<q>) utilizando selectores de hijo. Tenga en cuenta que esto no ilustra la única manera de hacerlo, y que el mejor método para usar depende del tipo de documento. También tenga en cuenta que los valores de Unicode se utilizan para especificar algunos de los caracteres de comillas especiales.

HTML

<div lang="en"><q>Esta cita en inglés tiene una cita <q>anidada</q> adentro.</q></div>
<div lang="fr"><q>Esta cita en francés tiene una cita <q>anidada</q> adentro.</q></div>
<div lang="de"><q>Esta cita en aleman tiene una cita <q>anidada</q> adentro.</q></div>

CSS

:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
:lang(fr) > q { quotes: '« ' ' »'; }
:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }

Resultado

Especificaciones

Especificación Estado Comentarios
Selectors Level 4
La definición de ':lang()' en esta especificación.
Working Draft Ningún cambio.
Selectors Level 3
La definición de ':lang()' en esta especificación.
Recommendation Ningún cambio significativo.
CSS Level 2 (Revision 1)
La definición de ':lang()' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
:lang()Chrome Soporte completo 1Edge Soporte completo 12Firefox Soporte completo 1IE Soporte completo 8Opera Soporte completo 8Safari Soporte completo 3.1WebView Android Soporte completo 1Chrome Android Soporte completo 18Firefox Android Soporte completo 4Opera Android Soporte completo 10.1Safari iOS Soporte completo 3.1Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Compatibilidad desconocida  
Compatibilidad desconocida

Ver también

Etiquetas y colaboradores del documento

Etiquetas: 
Colaboradores en esta página: mdnwebdocs-bot, lajaso, sapox
Última actualización por: mdnwebdocs-bot,