:lang()

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

Примечание. В HTML язык определяется комбинацией атрибута lang, элемента <meta> и, возможно, информации из протокола (например, заголовков HTTP). Для других типов документов могут быть другие методы для определения языка.

Псевдоклассы

• :active
• :any-link
• :blank
• :checked
• :current()
• :default
• :defined
• :dir()
• :disabled
• :empty
• :enabled
• :first
• :first-child
• :first-of-type
• :focus
• :focus-visible
• :focus-within
• :fullscreen
• :future
• :has()
• :host
• :host()
• :host-context()
• :hover
• :indeterminate
• :in-range
• :invalid
• :is()
• :lang()
• :last-child
• :last-of-type
• :left
• :link
• :local-link
• :not()
• :nth-child()
• :nth-col()
• :nth-last-child()
• :nth-last-col()
• :nth-last-of-type()
• :nth-of-type()
• :only-child
• :only-of-type
• :optional
• :out-of-range
• :past
• :placeholder-shown
• :read-only
• :read-write
• :required
• :right
• :root
• :scope
• :target
• :target-within
• :user-invalid
• :valid
• :visited
• :where()

Синтаксис

/* Selects any <p> in English (en) */
p:lang(en) {
  quotes: '\201C''\201D''\2018''\2019';
}

Спецификации

• Selectors Level 4
• Selectors Level 3
• CSS Level 2 (Revision 1)

Описание и примеры

=== CSS

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

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

Результат

Комментарии