CSS :lang() Pseudoclase

La pseudoclase :lang() selecciona elementos según el idioma en que están escritos. Permite aplicar estilos diferentes al contenido en distintos idiomas — por ejemplo, comillas francesas para texto en francés y comillas inglesas para texto en inglés — desde una sola hoja de estilos.

Esta página explica cómo el navegador determina el idioma de un elemento, en qué se diferencia :lang() del selector de atributo [lang], los problemas tipográficos que resuelve y los errores comunes que debes evitar.

Cómo se determina el idioma

Una regla :lang(xx) coincide con un elemento cuando su idioma es xx (o una subvariante de xx). El navegador determina el idioma de un elemento a partir del ancestro más cercano que lo declare, en el siguiente orden:

El atributo lang de HTML, p. ej. <html lang="it"> o <p lang="fr">. Esta es la fuente más habitual. Consulta códigos de idioma HTML para ver la lista completa de valores.
La declaración <meta> Content-Language.
La cabecera de respuesta HTTP Content-Language enviada por el servidor.

Los valores de idioma siguen BCP 47: una etiqueta primaria como it (italiano) o fr (francés), opcionalmente con una subetiqueta de región, como fr-CA para el francés de Canadá o en-GB para el inglés británico.

`:lang()` frente al selector de atributo `[lang]`

Es tentador escribir [lang="fr"] en lugar de :lang(fr), pero se comportan de forma diferente:

:lang(fr) es heredado. Coincide con todos los elementos dentro de una región en francés, incluso aquellos que no tienen su propio atributo lang, y también coincide con subvariantes — :lang(fr) también coincide con lang="fr-CA".
[lang="fr"] coincide solo con el elemento exacto que lleva literalmente lang="fr". No coincide con los descendientes ni con lang="fr-CA".

En resumen, usa :lang() para dar estilo al contenido por idioma, y usa el selector de atributo solo cuando necesites específicamente hacer coincidir la cadena del atributo en sí.

/* 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;
}

¿Cuándo usarlo?

El caso de uso clásico es el de las comillas tipográficamente correctas según el idioma. Distintos idiomas utilizan diferentes glifos de comillas: el inglés usa las curvadas "…", el francés usa las guillemas « … », el alemán usa „…". Al combinar :lang() con la propiedad quotes y el elemento <q>, las marcas correctas aparecen automáticamente según el idioma que las rodea. Otros usos incluyen fuentes específicas por idioma, interlineado o separación silábica (a menudo combinados con font-language-override).

Sintaxis

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

language-code es una etiqueta de idioma única como en, fr o fr-CA. La pseudoclase se adjunta habitualmente a un selector de tipo o se combina con él, p. ej. p:lang(fr) o :lang(en) > q.

Ejemplo: dar estilo al texto según el idioma

La regla siguiente tiene como objetivo todos los <p> que están en francés (lang="fr"), dejando intactos los demás párrafos.

<!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>

Pruébalo tú mismo »

Ejemplo: comillas correctas según el idioma

Aquí :lang() se combina con el combinador hijo (>) y la propiedad quotes para que cada <q> reciba la puntuación que corresponde a su idioma — comillas inglesas rectas dentro del bloque en inglés y guillemas francesas dentro del bloque en 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>

Pruébalo tú mismo »

Errores comunes

El atributo lang debe estar presente. :lang() solo funciona cuando se ha declarado un idioma en algún lugar del árbol. Si el documento no tiene atributo lang, nada coincide. Añade <html lang="en"> (o el código correcto) al elemento raíz de tu página.
Las subetiquetas coinciden, pero no al revés. :lang(fr) coincide con lang="fr-CA", pero :lang(fr-CA) no coincide con un simple lang="fr". Apunta a la etiqueta general (fr) a menos que realmente necesites una variante regional.
No distingue entre mayúsculas y minúsculas. :lang(EN) y lang="en" se coinciden entre sí; las etiquetas de idioma se comparan sin distinción de mayúsculas y minúsculas.

Compatibilidad con navegadores

:lang() con una sola etiqueta de idioma es compatible con todos los navegadores modernos (e incluso con Internet Explorer 8). La nueva forma con coma separada, :lang(en, fr), solo está disponible en versiones recientes del navegador, por lo que conviene usar una sola etiqueta por selector para la mayor compatibilidad posible.

Capítulos relacionados

CSS quotes — establece las comillas que usa <q> y content.
Selectores CSS — incluido el selector de atributo [lang].
CSS font-language-override — controla los glifos específicos del idioma.
Códigos de idioma HTML — valores válidos para el atributo lang.

Práctica

¿Qué hace la pseudoclase :lang en CSS?

Permite seleccionar elementos con un atributo de idioma específico.Permite dar estilo al texto en un idioma específico.Permite traducir texto de un idioma a otro.Permite aplicar estilos diferentes a distintas partes del texto.Cambia el idioma del texto.