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

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

Язык, определяемый в HTML, устанавливается с помощью комбинации атрибута lang (например, <html lang="it">), тега <meta> и информации от протокола (например, HTTP-заголовков).

Значение атрибута lang представляет собой двухбуквенный код языка, например lang="it" для итальянского, или комбинацию двух кодов, например lang="fr-ca" для французского (Канада).

С помощью селектора :lang() можно задавать определённый тип кавычек для цитат на странице.

Версия

CSS Selectors

CSS Selectors Level 3

Синтаксис

Синтаксис CSS :lang()

css

:lang() {
  css declarations;
}

Пример использования селектора lang() со значением "fr" для французского языка:

Пример кода 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 »

В следующем примере псевдокласс :lang() используется для выбора родительских элементов для элементов цитат с помощью комбинаторов потомков.

Пример использования селектора :lang() с комбинаторами потомков.

Ещё один пример кода 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 »

Practice

Что делает псевдокласс :lang в CSS?

Позволяет выбирать элементы с определённым языковым атрибутом.Позволяет стилизовать текст на определённом языке.Позволяет переводить текст с одного языка на другой.Позволяет применять разные стили к разным частям текста.Изменяет язык текста.

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

Версия ​

Синтаксис ​

Пример использования селектора lang() со значением "fr" для французского языка: ​