From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/_colon_lang/index.html | 100 ++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 files/ru/web/css/_colon_lang/index.html (limited to 'files/ru/web/css/_colon_lang') diff --git a/files/ru/web/css/_colon_lang/index.html b/files/ru/web/css/_colon_lang/index.html new file mode 100644 index 0000000000..69b48325b0 --- /dev/null +++ b/files/ru/web/css/_colon_lang/index.html @@ -0,0 +1,100 @@ +--- +title: ':lang()' +slug: 'Web/CSS/:lang' +tags: + - CSS + - Псевдо-класс +translation_of: 'Web/CSS/:lang' +--- +
{{CSSRef}}
+ +

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

+ +
/* Выбирает все <p>, что на английском (en) */
+p:lang(en) {
+  quotes: '\201C' '\201D' '\2018' '\2019';
+}
+ +
+

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

+
+ +

Синтаксис

+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Параметр

+ +
+
<language-code>
+
{{cssxref("<string>")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации HTML.
+
+ +

Пример

+ +

In this example, the :lang() pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using child combinators. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.

+ +

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

CSS

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

Результат

+ +

{{EmbedLiveSample('Example', 350)}}

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS4 Selectors')}}Adds wildcard language matching and comma-separated list of languages.
{{SpecName('CSS3 Selectors', '#lang-pseudo', ':lang()')}}{{Spec2('CSS3 Selectors')}}No significant change.
{{SpecName('CSS2.1', 'selector.html#lang', ':lang()')}}{{Spec2('CSS2.1')}}Initial definition.
+ +

Поддержка браузерами

+ +
+ + +

{{Compat("css.selectors.lang")}}

+
+ +

Также смотрите

+ + -- cgit v1.2.3-54-g00ecf