W3docs
ru
Войти

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

Псевдокласс :lang() выбирает элементы с атрибутом lang указанного значения. Узнайте о псевдоклассе и изучите примеры.

Псевдокласс :lang() выбирает элементы на основе языка, на котором написан их контент. Он позволяет применять разные стили к содержимому на разных языках — например, французские кавычки для французского текста и английские кавычки для английского — из одной таблицы стилей.

На этой странице объясняется, как браузер определяет язык элемента, чем :lang() отличается от селектора атрибута [lang], какие типографские проблемы он решает и на что стоит обратить внимание.

Как определяется язык

Правило :lang(xx) соответствует элементу, когда его языком является xx (или диалект xx). Браузер определяет язык элемента по ближайшему предку, объявляющему язык, используя по порядку:

  • Атрибут HTML lang, например <html lang="it"> или <p lang="fr">. Это наиболее распространённый источник. Полный список значений см. в разделе Языковые коды HTML.
  • Объявление <meta> Content-Language.
  • HTTP-заголовок ответа Content-Language, отправляемый сервером.

Значения языка следуют стандарту BCP 47: основной подтег, например it (итальянский) или fr (французский), опционально с региональным подтегом, например fr-CA для канадского французского или en-GB для британского английского.

:lang() и селектор атрибута [lang]

Может возникнуть соблазн написать [lang="fr"] вместо :lang(fr), но они ведут себя по-разному:

  • :lang(fr) наследуется. Он соответствует каждому элементу внутри французского региона, даже тем, у которых нет собственного атрибута lang, и он учитывает диалекты — :lang(fr) также соответствует lang="fr-CA".
  • [lang="fr"] соответствует только тому конкретному элементу, который буквально содержит lang="fr". Он не распространяется на потомков и не соответствует lang="fr-CA".

Вкратце: используйте :lang() для стилизации контента по языку, а селектор атрибута — только когда вам конкретно нужно сопоставить строку атрибута.

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

Когда его использовать?

Классический вариант использования — типографски правильные кавычки. Разные языки используют разные знаки кавычек: в английском — фигурные "…", во французском — угловые « … », в немецком — „…". Комбинируя :lang() со свойством quotes и элементом <q>, правильные знаки появляются автоматически в зависимости от окружающего языка. Другие варианты применения включают языковые шрифты, межстрочный интервал или расстановку переносов (часто в сочетании с font-language-override).

Синтаксис

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

language-code — это одиночный языковой тег, например en, fr или fr-CA. Псевдокласс обычно прикрепляется к селектору типа или комбинируется с ним, например p:lang(fr) или :lang(en) > q.

Пример: стилизация текста по языку

Правило ниже применяется к каждому элементу <p>, написанному на французском (lang="fr"), не затрагивая остальные абзацы.

<!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>
Попробуйте сами »

Пример: типографски правильные кавычки

Здесь :lang() комбинируется с дочерним комбинатором (>) и свойством quotes, чтобы каждый элемент <q> получал пунктуацию, соответствующую его языку — прямые английские кавычки внутри английского блока и французские угловые кавычки внутри французского.

<!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>
Попробуйте сами »

Распространённые подводные камни

  • Атрибут lang должен присутствовать. :lang() работает только тогда, когда язык действительно объявлен где-то в дереве элементов. Если у вашего документа нет атрибута lang, ничего не будет соответствовать. Добавьте <html lang="en"> (или правильный код) в корень страницы.
  • Подтеги совпадают, но не наоборот. :lang(fr) соответствует lang="fr-CA", но :lang(fr-CA) не соответствует простому lang="fr". Используйте широкий тег (fr), если только вам действительно не нужен региональный диалект.
  • Сравнение выполняется без учёта регистра. :lang(EN) и lang="en" соответствуют друг другу; языковые теги сравниваются без учёта регистра.

Поддержка браузерами

:lang() с одним языковым тегом поддерживается во всех современных браузерах (и вплоть до Internet Explorer 8). Более новая форма с разделёнными запятыми :lang(en, fr) доступна только в последних версиях браузеров, поэтому для максимальной совместимости придерживайтесь одного тега в селекторе.

Связанные главы

Практика

Практика
Что делает псевдокласс :lang в CSS?
Что делает псевдокласс :lang в CSS?
Was this page helpful?