:lang() - Sélecteur CSS

Description de la pseudo-classe :lang().

La pseudo-classe :lang() désigne les éléments qui sont dans la langue spécifiée en paramètre. La langue de l'élément est déterminée, soit par l'attribut lang="...", soit par une méta-donnée du protocole http, soit par un algorithme du navigateur.
C'est ce qui fait la différence avec un sélecteur du type critère [lang='fr'] car ce dernier ne prend en compte que l'attribut lang de l'élément lui-même.
Exemple de syntaxe avec ces deux sélecteurs. Ils désignent les éléments de la classe texte écrits en italien.

Dans la syntaxe de lang('en') La comparaison ne tient pas compte de la casse. D'autre part, les apostrophes ou guillemets peuvent être omis, la plupart des navigateurs acceptent cette syntaxe.

La spécification du W3C précise que plusieurs codes de langue peuvent être indiqués en les séparant par des virgules, mais peu de navigateurs reconnaissent cette variante de syntaxe.

Une autre syntaxe utilise le caractère étoile ( * ) comme caractère joker. Cela permet par exemple de spécifier seulement la deuxième partie du code de langue. Attention : dans cette syntaxe le code doit être entre guillemets ou entre apostrophes, et d'autre part le caractère * doit remplacer toute une partie du code ISO.

Exemples :
:lang('*-be') cible les éléments comportant lang="fr-be".
:lang('f*-fr') est incorrect.

Exemples d'utilisation de la pseudo-classe :lang().

Syntaxe de base.

Les trois éléments ci-dessous comportent des attributs lang avec des valeurs différentes. Le sélecteur par pseudo-classe :lang() permet de les sélectionner en fonction.

Sélection de plusieurs langues.

L'exemple ci-dessous illustre le fonctionnement (ou le non fonctionnement) du sélecteur lang('it','en') : plusieurs codes de langue spécifiés dans une seule pseudo-classe :lang(). Si le fonctionnement est correct, les élément en anglais et en italien doivent être encadré d'un trait rouge.

Une syntaxe alternative est également proposée et agit sur la couleur du texte : les éléments en anglais et en italien sont en bleu. Cette deuxième syntaxe, qui consiste à répéter un sélecteur complet pour chacune des langues, est plus longue à écrire, mais parfaitement reconnue par tous les navigateurs.

En cas d’absence de l'attribut lang.

Dans ce troisième exemple, l'élément ne comporte pas d'attribut lang dans le code HTML. La décision se fait d'après l'attribut lang="fr" de la balise racine html.

L'exemple comporte également une règle avec un sélecteur par critère [lang='fr']. On voit que ce deuxième sélecteur est inopérant puisque l'élément concerné' ne comporte pas lui-même d'attribut lang.

Utilisation du caractère joker *.

Les navigateurs commencent à reconnaître les syntaxes avec un caractère joker. Voici un exemple qui risque de ne pas fonctionner sur tous les navigateurs. En Suisse plusieurs langues sont parlées, en fonction du canton (le français, l'allemand, l'italien, etc.), voici comment sélectionner toutes ces langues lorsqu'elles sont associées à la Suisse.
Le deuxième cadre met en rouge les éléments de langue allemande quelque soit la pays.

Choisir les marques de citation en fonction de la langue.

Voici un autre exemple ou les marques de cotation sont choisies en fonction des usages de la langue :
    '“'et '”' pour la langue anglaise.
    '«' et '»' pour la langue française.
    '»' et '«' pour la langue allemande.

Compatibilité des navigateur avec :lang().

Le sélecteur par pseudo-classe :lang() est bien reconnu par tous les navigateurs, tout au moins dans sa syntaxe de base. Pour les langues multiples et pour les caractères joker, la plupart des grands navigateurs reconnaissent maintenant ces syntaxes (2026) mais le tableau ne le montre pas.

1

Pseudo-classe
:lang()

2

Plusieurs langues
séparées par des virgules

3

Caractère
joker

Estimation de la prise en charge globale.

96%

19%

19%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Safari

Samsung Internet

Opéra

Safari sur IOS

Firefox

Firefox pour Androïd

Edge

Chrome

KaiOS Browser

Androïd Brower

Chrome pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Historique de la pseudo-classe :lang().

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Ce niveau 2 de la spécification décrit le mécanisme des styles en cascade de CSS. Ce langage est utilisé pour formater les documents HTML ou XML. Il prend en charge les feuilles de style spécifiques aux médias afin que les auteurs puissent adapter la présentation de leurs documents aux navigateurs visuels, aux dispositifs auditifs, aux imprimantes, aux appareils braille, aux appareils portables, etc.

  Concernant :lang() Première présentation de la pseudo-classe :lang().
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Sélecteurs - Niveau 3

  Ce document décrit les sélecteurs qui existent déjà dans CSS1 et CSS2, et présente en plus de nouveaux sélecteurs pour CSS3 et d'autres langages qui pourraient en avoir besoin.

  Concernant :lang() Pas de modification concernant la pseudo-classe :lang().
  

  03 Août 1999

  Document de travail.

  

  13 Novembre 2001

  Candidat à la recommandation.

  

  15 Décembre 2009

  Proposé à la recommandation.

  

  29 Septembre 2011

  Recommandation.

• Sélecteurs - Niveau 4

  Ce module de spécification définit de nouveaux sélecteurs utilisables en CSS.

  Concernant :lang() Pas de changement concernant la pseudo-classe :lang().
  

  29 Septembre 2011

  Document de travail.

  

  

  

Voir aussi...

Vous pouvez aussi consulter la page sur les pseudo-classes ou sélecteurs ci-dessous, qui sont également en rapport avec la langue ou le mode d'écriture.