:lang() - Sélecteur CSS

:lang()

Résumé des caractéristiques du sélecteur :lang()

Description rapide
Pseudo-classe désignant les élément à partir de leur langue.
Statut
Standard
Module W3C
Sélecteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)
Statut du document: REC (recommandation)

Description de la pseudo-classe :lang().

La pseudo-classe désigne les éléments qui sont dans la langue spécifiée. Celle-ci étant 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.
Exemple de syntaxe avec ces deux sélecteurs. Ils désignent les éléments de la classe texte écrits en italien.

.texte:lang(it) {color:red;} .texte[lang='it'] {color:red;}

Dans la syntaxe de lang(en), le code de langue ne doit pas être entouré de guillemets ou d'apostrophes, même si certains navigateurs comme Firefox l'acceptent. La comparaison ne tient pas compte de la casse.

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.

Exemple : :lang('*-be') cible lang="fr-be".

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.

Cet élément comporte l'attribut lang="fr".

This element has the lang="en" attribute.

Questo elemento ha l'attributo lang="it".

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.

Cet élément comporte l'attribut lang="fr".

This element has the lang="en" attribute.

Questo elemento ha l'attributo lang="it".

En cas d’absence de l'attribut lang.

Dans ce troisième exemple, aucun des éléments ne comporte 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 les éléments concernés ne comportent pas eux-même d'attribut lang=.

Cet élément ne comporte pas d'attribut lang.
Mais la racine html possède l'attribut lang="fr".

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.

Colonne 1
Traitement correct par les navigateurs de la pseudo-class :lang() qui permet de cibler les éléments en fonction de leur langue.
Colonne 2
Traitement correct de plusieurs langues, séparées par des virgules, dans le paramètre de la pseudo-classe :lang().
Colonne 3
Traitement correct par les navigateurs des caractères joker ( * ) dans le paramètre de la pseudo-classe :lang().
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

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Opéra

Safari

Firefox

Chrome pour Androïd

Samsung Internet

Chrome

Edge

Androïd Brower

Opéra mini

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

Historique de la pseudo-classe :lang().

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.

    :dir()
    Pseudo-classe permettant de désigner des éléments en fonction du sens d'écriture