: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)

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

CSSHTMLРезультат

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

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

Комментарии