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

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

:lang( <language-code> )

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

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

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

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

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

Spécification État Commentaires
Selectors Level 4
La définition de ':lang()' dans cette spécification.
Version de travail Ajout du joker pour correspondre à toutes les langues. Ajout des listes de langues séparées par des virgules.
Selectors Level 3
La définition de ':lang()' dans cette spécification.
Recommendation Aucune modification significative.
CSS Level 2 (Revision 1)
La définition de ':lang()' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1IE Support complet 8Opera Support complet 8Safari Support complet 3.1WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 8Safari iOS Support complet 3.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon, teoli, louuis, FredB, ThePrisoner
Dernière mise à jour par : SphinxKnight,