Описание
Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.
Синтаксис
E + F { Описание правил стиля }
Для управления стилем соседних элементов используется символ плюса (+), который устанавливается между двумя селекторами E и F. Пробелы вокруг плюса не обязательны. Стиль при такой записи применяется к элементу F, но только в том случае, если он является соседним для элемента E и следует сразу после него. Рассмотрим несколько примеров.
Lorem ipsum dolor sit amet.
Тег
является дочерним по отношению к тегу
Поскольку он находится внутри этого контейнера. Соответственно
Выступает в качестве родителя
.
Lorem ipsum dolor sit amet.
Теги
и
никак не перекрываются и представляют собой соседние элементы. То, что они расположены внутри контейнера Не влияет на их отношение.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Соседними здесь являются теги
и
, а также
и
. При этом
и
к соседним элементам не относятся из-за того, что между ними расположен контейнер
.
HTML5
CSS 2.1
IE
Cr
Op
Sa
Fx
Соседние селекторы
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Результат данного примера показан на рис. 1.
Рис. 1. Красный цвет текста для соседних селекторов
Браузеры
Браузер Internet Explorer 7 не применяет стиль, если между селекторами располагается комментарий (B + /* плюс */ I
).
Селектор соседнего элемента выбирает элемент, расположенный в коде документа непосредственно за другим заданным элементом. Давайте для примера возьмём кусок html-кода.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут три тега:
,
и
. Теги
и
вложены в контейнер
Они являются дочерними по отношению к нему. Но по отношению друг к другу они являются соседними.
Синтаксис соседнего селектора: селектор предыдущего элемента, знак "+" и за ним селектор выбираемого элемента. Давайте работу соседнего селектора:
Соседний селектор в CSS.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
В примере видно, что селектор соседнего элемента сработал в первом абзеце. Тут теги
и
идут друг за другом. А во втором абзаце между ними использован тег
, теперь тут две другие соседние пары тегов:
+
и
+
.
Ошибкой в данном случае будет считать тег
соседним по отношению к тегу
Тут тег
является дочерним по отношению к тегу
А он, в свою очередь, является родителем
.
Пример ниже не сработает:
Соседний селектор в CSS.
Абзац и в нём жирный элемент, и вот наклонный элемент.
Тут жирный и подчёркнутый элементы, ещё наклонный.
Более реальный пример
Давайте рассмотрим работу соседнего селектора на более реальном примере. В больших статьях, содержащих несколько разделов обозначенных тегами
, желательно увеличить верхний отступ (свойство margin-top
). Отступ в 30px будет придавать тексту читабельности. Но вот в случае, если тег
идёт сразу после
, а это может быть в начале статьи, вержний отступ над тегом
будет лишним. Решить такую задачу можно при помощи селектора смежного элемента.
Вот html-код с примером работы селектора соседнего элемента.
Соседний селектор в CSS
Привет!
Заголовок h2
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Также используя инструмент соседнего селектора удобно регулировать отступ между заголовком и первым абзацем раздела, в нашем примере это теги
и
Также стоит отметить что для уменьшения отступов удобно использовать отрицательные значения.
Соседний селектор в CSS
Привет!
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Заголовок h2
Текст абзаца в про невероятные приключения.
Теперь пример того, как при помощи соседнего селектора выделить все элементы списка, кроме первого.
Соседний селектор в CSS
- Пункт списка №1.
- Пункт списка №2.
- Пункт списка №3.
- Пункт списка №4.
Вот что получится в результате работы этого примера:
Рисунок 1. Работа примера №5.
1 Июн 2015
В отличие от соседние используются реже. Главное отличие состоит в том, что они должны следовать за другим. Чтобы вам легче было усвоить данную тему, предлагаю разобрать вот такую структуру:
<тег1>
<тег2>
<тег3>
<тег4>
<тег5><тег6>...
Как вы, наверное, догадались из предыдущего урока, что теги 2, 3, 4, 5, 6 являются контекстными селекторами для тега1
. В свою очередь соседними селекторами будут являться: тег2 и тег3, тег4 и тег5
, но в тоже время тег2
и тег4
не являются соседними. Свойства стилей будут применяться на последний элемент который вы укажите соседним. Вам лишь следует соблюдать по очередность селекторов. Общий синтаксис написания такой:
Селектор1 + селектор2+ ...+селекторN { свойство1: значение; свойство2: значение; ... свойствоN: значение}
Давайте рассмотрим с вами вот такой пример:
Соседние селекторы
Заголовок
Тег p является соседним селектором с тегом
h1
Этот текст должен быть зеленого цвета
Соседние селекторы CSS или как их еще называют селекторы-родственники, позволяют применить стили к элементу в тех случаях, когда он стоит в HTML-коде перед определенным элементом, то есть элементы в данном случае должны находиться на одном уровне вложенности. Соседние селекторы тоже являются составными и складываются из простых селекторов (классов, идентификаторов и т.д.).
Чтобы вы четко усвоили, что такое соседние элементы, давайте снова рассмотрим знакомый пример, только чуть-чуть измененный.
<тег1>
<тег2>...
<тег3><тег4>...
<тег5><тег6>...
В этом примере есть всего две пары соседних элементов - это <тег2>
и <тег3>
, а также <тег3>
и <тег5>
, все. То есть <тег2>
и <тег5>
уже не являются соседями по отношению друг к другу., так как между ними стоит <тег3>
.
Соседние селекторы образуются из двух или более обычных селекторов разделенных между собой знаком "+
" (плюс), где сначала указывается самый первый элемент в коде, затем тот, который стоит за ним, потом тот, который стоит сразу за вторым и так далее. Как обычно, стили применяются к тому элементу, селектор которого находится последним в списке. Общий синтаксис.
селектор1 + селектор2 { свойство:
значение; свойство:
значение; ... }
Пробелы с обоих сторон знака "+
" можно ставить, а можно и нет, по желанию.
Пример использования соседних селекторов в CSS
Соседние селекторы
Заголовок
Текст. Strong. Текст. Em.
Текст. Em. Текст. Strong.
Текст. Em. Текст. Strong.
Результат в браузере
Заголовок
Текст. Strong.
Текст. Em.
Текст. Em.
Текст. Strong.
Текст. Em.
Текст. Strong.
В этом примере только первый параграф с красным текстом и только второго параграфа подчеркнут, так как больше никакие элементы не соответствуют правилам заданных стилей. В частности, содержимое элемента в данном случае не будет зеленого цвета, так как его от заголовка отделяет не один, а два параграфа. Кстати, как вы видите, во втором стиле были указаны сразу соседний и дочерний селекторы. Так я решил еще раз напомнить вам о том, что селекторы разных типов можно свободно объединять.
Браузер Internet Explorer 6.0 не понимает соседние селекторы (как и дочерние). Помните об этом.
Домашнее задание.
- Создайте на странице обычный двухколоночный макет с меню. Пусть у элементов списка меню будут макеры-изображения.
- Сделайте так, чтобы, если после тега заголовка
