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

CSS
Добавлено: 14 окт. 2018 г.

Что такое псевдо-класс :lang()?

Псевдо-класс :lang() в CSS выбирает элементы в контексте заданного языка. Язык в HTML определяется атрибутом lang, meta тегом и заголовком HTTP Accept-Language. Допустимые коды языков указаны в спецификации HTML 4.0.

:lang(language-code) { 
  // свойства элементов
}

Вышеприведенный код означает, что установленные свойства будут применяться к тем элементам, для которых установлен атрибут lang и их потомкам. Это значит, если у тега html устанволен атрибут lang, то свойства будут применены ко всей странице, за исключением тех элементов, у которых данный атрибут переопределен.

Псевдо-класс :lang() можно использовать как глобально, так и применять к отдельному элмеменут:

:lang(en) {
    //ко всем элементам родителя с атрибутом lang
}

:lang(en) h1{
    //к заголовкам первого уровня с родителем имеющим атрибут lang
}

h1:lang(en){
    //к заголовкам первого уровня с атрибутом lang
}

Псевдо-класс нечувствителен к регистру.

Пример использования

Самый распространенный пример использования - это использование разных знаков, к примеру, ковычек для разных языков.

<style>
q:lang(de) {
    quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */ 
}
q:lang(en) {
    quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */ 
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */ 
    quotes: "\00AB" "\00BB"; 
}
</style>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut, Dieu le veut</q>.</p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>

Результат: