Le :lang()sélecteur de pseudo classe dans CSS correspond aux éléments en fonction du contexte de leur attribut de langue donné. Le langage en HTML est déterminé par une combinaison de l' lang=""attribut, de l' élément et des informations du protocole telles que le champ d'en Accept-Language-tête de requête HTTP 1 . Les chaînes de code de langue acceptables sont spécifiées dans la spécification HTML 4.0.
:lang(language-code) ( // whatever styling ):lang(X)correspond si l'élément est dans la langue X. Si la correspondance est basée uniquement sur l'identifiant X étant soit égal, soit une sous-chaîne séparée par un tiret de la valeur de la langue de l'élément, de la même manière que si elle était effectuée par «| =» opérateur. La mise en correspondance de X avec la valeur de la langue de l'élément est effectuée sans tenir compte de la casse pour les caractères de la plage ASCII. L'identifiant X n'a pas besoin d'être un nom de langue valide. Il est important de noter que le :langsélecteur peut être utilisé globalement ou spécifiquement sur n'importe quel élément donné. N'hésitez pas à utiliser les sélecteurs descendants ou la :lang(language-code)pseudo classe seule.
Exemple
En utilisant l' langattribut sur notre élément racine (c'est-à-dire ), nous pouvons remplacer les guillemets en fonction de la langue spécifiée.
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
q:before ( content: open-quote; ) q:after ( content: close-quote; ) :lang(en) q ( quotes: '“' '”'; ) :lang(fr) q ( quotes: '«' '»'; ) :lang(de) q ( quotes: '»' '«'; )Anglais (en)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Français (en)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Allemand (de)
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas sempre. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
L'attribut de langue ne peut pas être appliqué aux éléments suivants:
- applet
- base
- basefont
- br
- Cadre
- jeu de cadres
- iframe
- param
- scénario
Prise en charge du navigateur
| Chrome | Safari | Firefox | Opéra | C'EST À DIRE | Android | iOS |
|---|---|---|---|---|---|---|
| Ouais | Ouais | Ouais | Ouais | Ouais | Ouais | Ouais |
:lang(X) est une recommandation de la spécification CSS niveau 2 révision 1 et initialement recommandée dans le cadre de la spécification CSS niveau 2.
1 Les champs d'en-tête HTTP sont des composants de l'en-tête de message des demandes et des réponses dans le protocole HTTP (Hypertext Transfer Protocol). Ils définissent les paramètres de fonctionnement d'une transaction HTTP. Le Accept-Languagechamp d'en-tête de demande est similaire à Accepter, mais restreint l'ensemble des langages naturels qui sont préférés en réponse à la demande.