CSS : Pseudo-classe :lang()

La pseudo-classe :lang() cible un élément en fonction de la langue dans laquelle il est défini.

Toute langue définie dans HTML repose sur une combinaison de l'attribut lang (par exemple <html lang="it">), de la balise <meta> et d'informations provenant du protocole (par exemple les en-têtes HTTP).

La valeur de l'attribut lang est un code de langue à deux lettres, comme lang="it" pour l'italien, ou deux codes de langue combinés, comme lang="fr-ca" pour le français canadien.

Grâce au sélecteur :lang(), il est possible de définir le type de guillemets à utiliser pour les citations dans une page.

Version

CSS Selectors

CSS Selectors Level 3

Syntaxe

Syntaxe CSS :lang()

css

:lang() {
  css declarations;
}

Exemple du sélecteur `:lang()` avec la valeur "fr" pour le français :

Exemple de code CSS :lang()

html

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

Try it Yourself »

Dans l'exemple suivant, la pseudo-classe :lang() est utilisée pour cibler les parents des éléments de citation à l'aide de combinateurs enfants.

Exemple du sélecteur `:lang()` utilisant des combinateurs enfants.

Autre exemple de code CSS :lang()

html

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

Try it Yourself »

Pratique

Que fait la pseudo-classe :lang() en CSS ?

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

CSS : Pseudo-classe :lang() ​

Version ​

Syntaxe ​

Exemple du sélecteur :lang() avec la valeur "fr" pour le français : ​