Соседние селекторы | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 7.0 | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
<p>Lorem ipsum <b>dolor</b> sit amet.
</p>
Тег <b> является дочерним по отношению к тегу <p>, поскольку он находится внутри этого контейнера. Соответственно <p> выступает в качестве родителя <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
Теги <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются теги <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.
Пример
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Соседние селекторы</title>
<style>
b + i {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.
="значение"]
="значение"]Статьи по теме
Рецепты CSS
Соседние селекторы | CSS | WebReference
- Содержание
- Синтаксис
- Пример
- Примечание
- Спецификация
- Браузеры
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
<p>Lorem ipsum <b>dolor</b> sit amet.</p>
Элемент <b> является дочерним по отношению к <p>, поскольку он находится внутри этого контейнера.
Соответственно <p> выступает в качестве родителя <b>.
<p>Lorem ipsum <b>dolor</b> <var>sit</var> amet.</p>
Элементы <var> и <b> никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера <p>, не влияет на их отношение.
<p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing <tt>elit</tt>.</p>
Соседними здесь являются элементы <b> и <i>, а также <i> и <tt>. При этом <b> и <tt> к соседним элементам не относятся из-за того, что между ними расположен контейнер <i>.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Соседние селекторы</title> <style> b + i { color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Lorem <b>ipsum </b> dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> <p>Lorem ipsum dolor sit amet, <i>consectetuer</i> adipiscing elit.</p> </body> </html> Результат данного примера показан на рис. 1.Рис. 1. Красный цвет текста для соседних селекторов
Примечание
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I).
Спецификация
| Спецификация | Статус |
|---|---|
| CSS Selectors Level 3 | Рекомендация |
CSS 2. 1 | Рекомендация |
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor's draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| 7 | 8 | 12 | 1 | 3. 5 | 1 | 1 |
| 1 | 1 | 4 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Родственные селекторы
Ctrl+←
Селекторы атрибутов
Ctrl+→
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Селектор смежных братьев и сестер
Веб-обзор
июль 2000 г.
Как было показано в предыдущих статьях этой серии, в CSS появилось несколько новых интересных селекторов. Между универсальным селектором и дочерним селектором можно создать селекторы, которые были бы практически невозможны при использовании традиционных селекторов в стиле CSS1.
В этой части мы продолжаем эту тенденцию. Однако на этот раз мы поговорим о том, что практически невозможно сделать с помощью контекстных селекторов. С селектор соседнего брата, вы можете применять стили к элементам на основе элементов, которые непосредственно предшествуют им в документе.
Как это работает
Синтаксис достаточно прост: всего два или более селектора, разделенных знаком плюс ( + ). Самая простая конструкция – это два элемента с плюсом между ними. Выбранным элементом будет тот, который следует непосредственно за символом плюса, но только если он следует за элементом, указанным перед плюсом. Например:
h2 + P {верхнее поле: 0;}
Правило будет применяться ко всем абзацам, которые следуют непосредственно за элементом h2 и имеют один и тот же родительский элемент.
Давайте рассмотрим это подробнее. Некоторое время изучите представление в виде дерева на рис. 1.
| Рис. 1. Поиск соседних одноуровневых элементов с помощью дерева документов. |
Одним из примеров смежных элементов одного уровня являются элементы EM и STRONG внутри абзаца. На самом деле единственное место на рис. 1, где элементы не имеют смежных братьев и сестер, это место, где у них вообще нет братьев и сестер, например, элемент A ; и в неупорядоченном списке с тремя LI детьми. Там первый и третий элементов LI
Допустим, мы хотим, чтобы текст STRONG был зеленым, но только тогда, когда он следует за текстом EM . Правило для этого:
EM + STRONG {цвет: зеленый;}
Вернувшись к рисунку 1, мы видим, что элемент STRONG , являющийся частью абзаца, будет зеленым, а элемент STRONG , являющийся частью LI , — нет. Обратите внимание, что это верно, несмотря на то, что внутри абзаца может быть текст, который находится между 9Элементы 0016 EM и STRONG . Например:
Этот абзац содержит некоторые выделенный текст и после что мы находим некоторые сильно подчеркнутые текст, который также зеленый, несмотря на промежуточный текст.
Текст между элементами не влияет на работу селектора. Это справедливо даже для элементов блочного уровня. Рассмотрим:
<дел>Привет, элемент h4
Вот некоторый текст, который является частью DIV, и не содержится в его дочернем элементе.Это короткий абзац
В этом случае пишем:
Небольшая практика поможет освоиться с этими селекторами. (Сведения о том, какие браузеры помогут вам в этом, см. в разделе «Поддержка браузеров» в конце статьи.)
title + P {font-style: italic; размер шрифта: 150%;}
Это может быть адаптировано любым количеством способов: вы можете приблизить списки к абзацам, используя 
В сочетании с такими вещами, как универсальный селектор, открывается огромное количество возможностей.
Комбинаторы CSS представляют собой альтернативу этому подходу, поскольку они объединяют два селектора для точного определения конкретных элементов для стилизации. Используя комбинаторы CSS, нам не нужно указывать имя класса или идентификатор элемента, чтобы специально выбрать его. Вместо этого мы можем связать его с окружающими его элементами и использовать общий комбинатор для того же эффекта.
Для этого мы можем использовать общий родственный селектор h2 ~ p. В этом примере любой
Второй селектор представляет элемент, который должен быть выбран, когда он появляется сразу после элемента, представленного первым селектором , при условии, что оба элемента являются дочерними элементами одного и того же родителя .
Для этого мы используем селектор непосредственного родственного элемента как h2+p.
Если мы хотим выбрать все элементы
Он также не выбирает никакую другую кнопку, которая не является прямым дочерним элементом поля класса. Таким образом, он нацелен на элемент кнопки без дополнительной сложности в коде разметки.