From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../web/css/adjacent_sibling_combinator/index.html | 130 +++++++++++++++++++++ 1 file changed, 130 insertions(+) create mode 100644 files/ru/web/css/adjacent_sibling_combinator/index.html (limited to 'files/ru/web/css/adjacent_sibling_combinator') diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html new file mode 100644 index 0000000000..42893ac5e3 --- /dev/null +++ b/files/ru/web/css/adjacent_sibling_combinator/index.html @@ -0,0 +1,130 @@ +--- +title: Смежные селекторы +slug: Web/CSS/Adjacent_sibling_combinator +translation_of: Web/CSS/Adjacent_sibling_combinator +--- +

{{CSSRef("Selectors")}}

+ +

Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определенным в первой части элементом.

+ +

Синтакс

+ +
former_element + target_element { style properties }
+
+ +

Пример

+ +
+
li:first-of-type + li {
+  color: red;
+}
+
+ +
<ul>
+  <li>Один</li>
+  <li>Два</li>
+  <li>Три</li>
+</ul>
+
+ +

{{EmbedLiveSample('Example_1', 200, 100)}}

+ +

Так же может использоваться для задания стиля определенного класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:

+ +
img + span.caption {
+  font-style: italic;
+}
+
+ +

сработает только на тех тегах span, для которых задан класс caption:

+ +
<img src="photo1.jpg"><span class="caption">Первая фотка</span>
+<img src="photo2.jpg"><span class="caption">Вторая</span>
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS4 Selectors', '#adjacent-sibling-combinators', 'next-sibling combinator')}}{{Spec2('CSS4 Selectors')}} 
{{SpecName('CSS3 Selectors', '#adjacent-sibling-combinators', 'Adjacent sibling combinator')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#adjacent-selectors', 'Adjacent sibling selectors')}}{{Spec2('CSS2.1')}}Изначальное определение
+ +

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

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка{{CompatVersionUnknown}}{{CompatVersionUnknown}}7.0[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
ВозможностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка2.1{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Интернет эксплорер 7 не обновляет стили корректно, когда элемент динамически размещается до элемента, отобранном селектором. А в Интернет эксплорер 8, если вставлен динамически кликом на ссылку, стиль превдокласса first-child не применяется до того, как ссылка потеряет фокус.

+ +

Смотрите также

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