Опубликовано: 18.08.2010 Последняя правка: 08.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

:lang

Псевдокласс CSS :lang используется для применения необходимых стилей (CSS) к элементам содержащим информацию на определенном языке (русский, английский, немецкий и т.д.). Чтобы правильно определить язык на котором написана страница браузеры используют целый ряд инструментов, например, это может быть информация полученная из серверного протокола или тега <META>, или вот в XML есть специальный атрибут xml:lang.

Но браузеры не всегда отображают страницы с учетом всех тонкостей конкретного языка. Например, встретив, тег <Q> они, конечно, проставят кавычки, но их вид не обязательно будет соответствовать тем, которые приняты в данном языке. Псевдокласс :lang позволяет явно указать стили, которые необходимо применять к тому или иному языку.

Тип псевдокласса

Назначение: псевдоклассы.

Применяется: ко всем элементам.

Значения

Значением псевдокласса :lang является указание в скобках кода языка которому предназначены стили. Для того, чтобы стили применились необходимо использовать в теге элемента атрибут lang значением которого должен быть также код языка.

Некоторые коды языков
КодЯзыкКодЯзык
abАбхазскийltЛитовский
azАзербайджанскийmoМолдавский
enАнглийскийdeНемецкий
en-usАмериканский вариант английскогоfaПерсидский (фарси)
arАрабскийplПольский
hyАрмянскийptПортугальский
baБашкирскийroРумынский
beБелорусскийruРусский
bgБолгарскийsaСанскрит
huВенгерскийsrСербский
viВьетнамскийskСловацкий
nlГолландскийslСловенский
elГреческийtgТаджикский
kaГрузинскийthТайский
iwИвритtrТурецкий
jiИдишtkТуркменский
gaИрландскийuzУзбекский
isИсландскийukУкраинский
esИспанскийfiФинский
itИтальянскийfrФранцузский
kkКазахскийhiХинди
kyКиргизскийhrХорватский
zhКитайскийcsЧешский
koКорейскийsvШведский
lvЛатышскийeoЭсперанто
laЛатыньetЭстонский

Синтаксис

селектор:lang(язык) {  }

Пример CSS: использование :lang

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS псевдокласс :lang</title>
  <style type="text/css">
   q:lang(ru) {
    quotes: '\00ab' '\00bb'; /* стиль кавычек в формате Юникода для русского языка */
    color: red; /* красный цвет текста */
   }
   q:lang(en) {
    quotes: '"' '"'; /* стиль кавычек для английского */
    color: blue; /* синий цвет текста */
   }
  </style>
 </head>
 <body>
  <p><q lang="ru">Русский</q> <q lang="en">Английский</q></p>
 </body>
</html>

Результат примера

Результат. Использование псевдокласса CSS :lang в браузере Opera

Использование псевдокласса CSS :lang

Браузеры, которые не понимают свойство quotes отобразят кавычки согласно своих внутренних настроек относительно их вида в данных языках.

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:НетДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:НетДаДаДаДаДа