:lang()

:lang(<language-code> [,<language-code> ]*)
  /* ... */
}

<language-code>

Список кодов языков, разделённых запятыми, один или несколько кодов <string> для указания элементов с языком, соответствующим кодам языков BCP 47. Сопоставление по языковым диапазонам нечувствительно к регистру.

При выборе языков применяется неявное сопоставление с подстановочным знаком, поэтому :lang(de-DE) будет сопоставляться с de-DE, de-DE-1996, de-Latn-DE, de-Latf-DE, и de-Latn-DE-1996. Явное использование подстановочных знаков должно включать полное соответствие подтегу языка, поэтому :lang("*-F*") неверно, но :lang("*-Fr") верно.

В этом примере псевдокласс :lang() используется для сопоставления родителей элементов цитат (<q>) с помощью комбинаторов потомков. Обратите внимание, что это не единственный способ сделать это, и лучший способ зависит от типа документа. Также обратите внимание, что для указания некоторых специальных символов цитат используются значения Unicode.

HTML

<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>

CSS

:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}

Результат

Следующий пример демонстрирует, как сопоставить несколько языков, предоставив список кодов языков, разделённых запятыми. Также можно использовать подстановочный знак для сопоставления языков в заданном языковом диапазоне.

CSS

/* Matches nl and de */
:lang("nl", "de") {
  color: green;
}

/* Omitting quotes & case-insensitive matching */
:lang(EN, FR) {
  color: blue;
}

/* Wildcard matching a language range */
:lang("*-Latn") {
  color: red;
}

HTML

<p lang="nl">Dit is een Nederlandse paragraaf.</p>
<p lang="de">Dies ist ein deutscher Satz.</p>
<p lang="en">This is an English sentence.</p>
<p lang="en-GB">Matching the language range of English.</p>
<p lang="fr">Ceci est un paragraphe français.</p>
<p lang="fr-Latn-FR">Ceci est un paragraphe français en latin.</p>

Результат

• Псевдокласс :dir, который сопоставляет элементы по направленности текста
• Атрибут HTML lang
• Атрибут HTML translate
• RFC 5646: Теги для идентификации языков (также известный как BCP 47)