CSS :lang() Pseudo-classe

La pseudo-classe :lang() sélectionne les éléments en fonction de la langue dans laquelle ils sont rédigés. Elle vous permet d'appliquer des styles différents à du contenu dans différentes langues — par exemple, des guillemets français pour un texte en français et des guillemets anglais pour un texte en anglais — depuis une seule feuille de style.

Cette page explique comment le navigateur détermine la langue d'un élément, en quoi :lang() diffère du sélecteur d'attribut [lang], les problèmes typographiques qu'elle résout, ainsi que les pièges à éviter.

Comment la langue est déterminée

Une règle :lang(xx) correspond à un élément lorsque sa langue est xx (ou une sous-variante de xx). Le navigateur détermine la langue d'un élément à partir de l'ancêtre le plus proche qui en déclare une, dans cet ordre :

L'attribut HTML lang, par exemple <html lang="it"> ou <p lang="fr">. C'est la source la plus courante. Consultez les codes de langue HTML pour la liste complète des valeurs.
La déclaration <meta> Content-Language.
L'en-tête HTTP Content-Language envoyée par le serveur.

Les valeurs de langue suivent BCP 47 : une balise primaire comme it (italien) ou fr (français), éventuellement accompagnée d'une balise de région, comme fr-CA pour le français canadien ou en-GB pour l'anglais britannique.

`:lang()` vs. le sélecteur d'attribut `[lang]`

On pourrait être tenté d'écrire [lang="fr"] à la place de :lang(fr), mais leur comportement est différent :

:lang(fr) est hérité. Il correspond à chaque élément à l'intérieur d'une région française, même ceux qui n'ont pas d'attribut lang propre, et il correspond aux sous-variantes — :lang(fr) correspond également à lang="fr-CA".
[lang="fr"] correspond uniquement à l'élément exact qui porte littéralement lang="fr". Il ne correspond pas aux descendants et ne correspond pas à lang="fr-CA".

En résumé, utilisez :lang() pour styliser le contenu par langue, et utilisez le sélecteur d'attribut uniquement lorsque vous avez précisément besoin de correspondre à la chaîne d'attribut elle-même.

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

Quand l'utiliser ?

Le cas d'usage classique est les guillemets typographiquement corrects selon la langue. Différentes langues utilisent des guillemets différents : l'anglais utilise des guillemets bouclés "…", le français utilise des guillemets « … », l'allemand utilise „…". En combinant :lang() avec la propriété quotes et l'élément <q>, les bons guillemets apparaissent automatiquement en fonction de la langue environnante. D'autres utilisations incluent les polices spécifiques à une langue, l'interlignage ou la césure (souvent associés à font-language-override).

Syntaxe

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

language-code est une balise de langue unique telle que en, fr ou fr-CA. La pseudo-classe est généralement attachée à un sélecteur de type ou combinée avec lui, par exemple p:lang(fr) ou :lang(en) > q.

Exemple : styliser le texte selon la langue

La règle ci-dessous cible chaque <p> rédigé en français (lang="fr"), laissant les autres paragraphes inchangés.

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

Essayez vous-même »

Exemple : guillemets corrects selon la langue

Ici, :lang() est combiné avec le combinateur enfant (>) et la propriété quotes afin que chaque <q> reçoive la ponctuation correspondant à sa langue — des guillemets anglais droits à l'intérieur du bloc anglais et des guillemets français à l'intérieur du bloc français.

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

Essayez vous-même »

Pièges courants

L'attribut lang doit être présent. :lang() ne fonctionne que lorsqu'une langue est effectivement déclarée quelque part dans l'arbre. Si votre document ne possède pas d'attribut lang, rien ne correspond. Ajoutez <html lang="en"> (ou le code approprié) à la racine de votre page.
Les sous-balises correspondent, mais pas l'inverse. :lang(fr) correspond à lang="fr-CA", mais :lang(fr-CA) ne correspond pas à un simple lang="fr". Ciblez la balise générale (fr) sauf si vous avez réellement besoin d'une variante régionale.
C'est insensible à la casse. :lang(EN) et lang="en" se correspondent ; les balises de langue sont comparées sans tenir compte de la casse.

Compatibilité avec les navigateurs

:lang() avec une seule balise de langue est pris en charge par tous les navigateurs modernes (et remonte jusqu'à Internet Explorer 8). La nouvelle forme à valeurs séparées par des virgules, :lang(en, fr), n'est disponible que dans les versions récentes des navigateurs ; restez donc à une seule balise par sélecteur pour une compatibilité maximale.

Chapitres associés

CSS quotes — définir les guillemets utilisés par <q> et content.
Sélecteurs CSS — y compris le sélecteur d'attribut [lang].
CSS font-language-override — contrôler les glyphes spécifiques à une langue.
Codes de langue HTML — valeurs valides pour l'attribut lang.

Pratique

Que fait la pseudo-classe :lang en CSS ?

Elle permet de sélectionner des éléments avec un attribut de langue spécifique.Elle permet de styliser du texte dans une langue spécifique.Elle permet de traduire du texte d'une langue à une autre.Elle permet d'appliquer des styles différents à différentes parties du texte.Elle change la langue du texte.