CSS :lang() Pseudo Class

La pseudo-classe :lang() seleziona gli elementi in base alla lingua in cui sono scritti. Permette di applicare stili diversi a contenuti in lingue diverse — ad esempio, virgolette francesi per il testo in francese e virgolette inglesi per il testo in inglese — da un unico foglio di stile.

Questa pagina spiega come il browser determina la lingua di un elemento, come :lang() differisce dal selettore di attributo [lang], i problemi tipografici che risolve e le insidie da evitare.

Come viene determinata la lingua

Una regola :lang(xx) corrisponde a un elemento quando la sua lingua è xx (o una variante secondaria di xx). Il browser determina la lingua di un elemento dall'antenato più vicino che ne dichiara una, utilizzando, nell'ordine:

L'attributo HTML lang, ad es. <html lang="it"> o <p lang="fr">. Questa è la fonte più comune. Consulta i codici di lingua HTML per l'elenco completo dei valori.
La dichiarazione <meta> Content-Language.
L'intestazione HTTP Content-Language di risposta inviata dal server.

I valori di lingua seguono BCP 47: un sottotag primario come it (italiano) o fr (francese), opzionalmente con un sottotag di regione, come fr-CA per il francese canadese o en-GB per l'inglese britannico.

`:lang()` vs. il selettore di attributo `[lang]`

Può essere allettante scrivere [lang="fr"] invece di :lang(fr), ma si comportano in modo diverso:

:lang(fr) è ereditato. Corrisponde a ogni elemento all'interno di una regione francese, anche quelli che non hanno un proprio attributo lang, e corrisponde alle varianti secondarie — :lang(fr) corrisponde anche a lang="fr-CA".
[lang="fr"] corrisponde solo all'elemento esatto che porta letteralmente lang="fr". Non corrisponde ai discendenti e non corrisponde a lang="fr-CA".

In breve, usa :lang() per stilizzare il contenuto per lingua, e usa il selettore di attributo solo quando hai specificamente bisogno di corrispondere alla stringa dell'attributo stessa.

/* Matches the <html> tag AND every element inside it,
   including lang="fr-CA". */
:lang(fr) {
  font-style: italic;
}

/* Matches ONLY an element with exactly lang="fr". */
[lang="fr"] {
  font-style: italic;
}

Quando usarlo?

Il caso d'uso classico è rappresentato dalle virgolette tipograficamente corrette per la lingua. Lingue diverse usano glifi di virgolette diversi: l'inglese usa le virgolette curve "…", il francese usa i caporali « … », il tedesco usa „…". Combinando :lang() con la proprietà quotes e l'elemento <q>, i segni giusti appaiono automaticamente in base alla lingua circostante. Altri utilizzi includono font specifici per la lingua, interlinea o sillabazione (spesso abbinati a font-language-override).

Sintassi

:lang(language-code) {
  /* declarations */
}

language-code è un singolo tag di lingua come en, fr o fr-CA. La pseudo-classe è tipicamente collegata o combinata con un selettore di tipo, ad es. p:lang(fr) o :lang(en) > q.

Esempio: stilizzare il testo per lingua

La regola seguente riguarda ogni <p> che è in francese (lang="fr"), lasciando intatti gli altri paragrafi.

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

Provalo tu stesso »

Esempio: virgolette tipograficamente corrette per la lingua

Qui :lang() è combinato con il combinatore figlio (>) e la proprietà quotes in modo che ogni <q> riceva la punteggiatura corrispondente alla sua lingua — virgolette inglesi diritte all'interno del blocco inglese e caporali francesi all'interno del blocco francese.

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

Provalo tu stesso »

Insidie comuni

L'attributo lang deve essere presente. :lang() funziona solo quando una lingua è effettivamente dichiarata da qualche parte nell'albero. Se il documento non ha un attributo lang, nulla corrisponde. Aggiungi <html lang="en"> (o il codice corretto) alla radice della pagina.
I sottotag corrispondono, ma non viceversa. :lang(fr) corrisponde a lang="fr-CA", ma :lang(fr-CA) non corrisponde a un semplice lang="fr". Usa il tag generico (fr) a meno che tu non abbia davvero bisogno di una variante regionale.
Non è sensibile alle maiuscole. :lang(EN) e lang="en" si corrispondono; i tag di lingua vengono confrontati senza distinzione tra maiuscole e minuscole.

Supporto browser

:lang() con un singolo tag di lingua è supportato in tutti i browser moderni (e fin da Internet Explorer 8). La nuova forma con valori separati da virgola, :lang(en, fr), è disponibile solo nelle versioni recenti dei browser, quindi utilizza un solo tag per selettore per il massimo supporto.

Capitoli correlati

CSS quotes — imposta i segni di virgolette usati da <q> e content.
CSS selectors — incluso il selettore di attributo [lang].
CSS font-language-override — controlla i glifi specifici per la lingua.
HTML language codes — valori validi per l'attributo lang.

Esercitazione

Pratica

Cosa fa la pseudo-classe :lang in CSS?

Consente di selezionare elementi con uno specifico attributo di lingua.Consente di stilizzare il testo in una lingua specifica.Consente di tradurre il testo da una lingua all'altra.Consente di applicare stili diversi a parti diverse del testo.Cambia la lingua del testo.