:lang

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

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

css
/* 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

Error: could not find syntax for this item

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

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

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

Resultado

Especificaciones

Specification
Selectors Level 4
# lang-pseudo

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:lang()
Comma-separated list of language codes as :lang(A, B)
Matching language codes with wildcards as :lang(*-Latn)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Ver también