: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.

La pseudo-classe :lang permet de définir la mise en forme d'un élément selon la langue dans laquelle il est écrit.

css
/* Correspond aux paragraphes, uniquement si ceux-ci */
/* sont indiqués comme étant en anglais (en) */
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

Note : En HTML, la langue d'un élément est déterminée par l'attribut lang, l'élément <meta> et d'autres informations comme les en-têtes HTTP ; pour les autres types de documents, d'autres méthodes peuvent être utilisées.

Les chaînes de caractères admissibles pour définir des langues sont définies dans la spécification HTML 4.0.

Syntaxe

Syntaxe formelle

Error: could not find syntax for this item

Paramètre

language-code

La chaîne de caractères (<string>) qui définit la langue des éléments qu'on veut sélectionner.

Exemples

Dans cet exemple, la pseudo-classe :lang est utilisée pour faire correspondre le parent d'une citation en utilisant :first-child. Il ne s'agit pas de la seule solution pour ce type de problème, ni même de la meilleure (qui dépendra du type de document). Les valeurs Unicode sont utilisées pour certains caractères spéciaux de citation.

CSS

css
:lang(fr) > Q {
  quotes: "« " " »";
}

:lang(de) > Q {
  quotes: "»" "«" "\2039" "\203A";
}

:lang(en) > Q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

HTML

html
<div lang="fr">
  <q>
    Cette citation française a
    <q>une citation</q>
    imbriquée.
  </q>
</div>

<div lang="de">
  <q>
    Cette citation allemande a
    <q>une citation</q>
    imbriquée.
  </q>
</div>

<div lang="en">
  <q>
    Cette citation anglaise a
    <q>une citation</q>
    imbriquée.
  </q>
</div>

Résultat

Spécifications

Specification
Selectors Level 4
# lang-pseudo

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi