Псевдокласс CSS `:lang()`

:lang() CSS-псевдокласс выбирает элементы на основе языка, к которому они относятся.

Попробуйте

*:lang(en-US) {
  outline: 2px solid deeppink;
}

<p lang="en-US">
  Music during road trips and long commutes aren't a problem, but using
  headphones isn't the best thing to do while driving in your car.
</p>

<p lang="pl-PL">
  Gdy widzimy znak z narysowaną czaszką i napisem
  <strong lang="en-US">DANGER</strong> to lepiej nie wchodzić do środka.
</p>

Синтаксис

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

Параметры

<language-code>

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

Описание

При выборе языков используется неявное сопоставление с подстановочными знаками, поэтому :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";
}

Результат

Выбор элементов для нескольких языков

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

p {
  margin: 0;
}

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
• Языковой тег BCP 47