Язык текста.

Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.

Если Вы помните из курса HTML, язык документа определяют атрибуты: charset - кодировка документа и content - язык документа (https://webremeslo.ru/html/glava10.html#charset) для тега < meta>.

< meta http-equiv=" Content-Type" Content=" text/html; charset=UTF-8" >
< meta http-equiv=" Content-Language" Content=" ru" >

Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() - в круглых скобках которого собственно и указывается язык.

Язык может быть:

· ru - Русский

· en - Английский

· de - Немецкий

· fr - Французский

· it - Итальянский

Всё вместе пишется так:

span: lang(en) {font-style: italic}

- здесь мы указали, что текст взятый в контейнер < span> английский и что он должен отображаться курсивом.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " https://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдокласс lang< /title>
< meta http-equiv=" Content-Type" Content=" text/html; charset=UTF-8" >
< meta http-equiv=" Content-Language" Content=" ru" >
< style type=" text/css" >
p: lang(ru) {color: #00f; }
p: lang(en) {color: #f00; }
< /style>
< /head>
< body>
< p lang=" ru" > Русский текст выделен синим< /p>
< p lang=" en" > English text is chosen red< /p>
< /body>
< /html>

Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: < p lang=" en" > текст< /p> прописанный в блоке CSS.

Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег < q>) с помощью значения quotes - кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.

Пишется так:

q: lang(en) {quotes: " \201C" " \201D" }

В фигурных скобках после значения quotes указывается юникод символа/ов или просто смвол/ы для открывающей и закрывающей кавычки.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " https://www.w3.org/TR/html4/strict.dtd" >
< html>
< head>
< title> Псевдокласс lang. Цитаты.< /title>
< meta http-equiv=" Content-Type" Content=" text/html; charset=UTF-8" >
< meta http-equiv=" Content-Language" Content=" ru" >
< style type=" text/css" >
div {
color: #000;
font-size: 24px;
}
q: lang(en) {quotes: " \201C" " \201D" }
q: lang(de) {quotes: " \201E" " \201C" }
q: lang(fr) {quotes: " \00AB" " \00BB" }
q: lang(ru) {quotes: " ёклмн.." "..ёпрст" }
< /style>
< /head>
< body>
< div>
< p> Обратите внимание на вид кавычек для цитат: < p>
< q> Цитата по умолчанию< /q> < br>
< q lang=" fr" > Французская цитата< /q> < br>
< q lang=" de" > Немецкая цитата< /q> < br>
< q lang=" en" > Английская цитата< /q> < br>
< q lang=" ru" > Русская цитата< /q> < br>
< /div>
< /body>
< /html>

Полезные советы:

· Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега < style> в голове документа или внешнего CSS файла.

· Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:

: hover {color: #ff0}

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

· Браузер IE6 и ниже игнорирует практически все псевдоклассы.