В прошлых подглавах мы изучали родственные отношения между тегами HTML-документа, в том числе рассматривали селекторы дочерних элементов. Теперь пришло время познакомиться с селекторами родственных элементов и селекторами соседних элементов.

Соседние селекторы

С помощью соседних селекторов (также их называют смежными) выбираются элементы веб-страницы, у которых есть общий родитель и они находятся рядом друг с другом. Стиль применяется к последнему указанному в селекторе элементу.

Пример: допустим, вам необходимо, чтобы каждый абзац

Который идет первым после заголовка

, имел наклонный шрифт. Это можно реализовать с помощью такого кода CSS:

H1+p { font-style: italic; }

Записывая это правило, в первую очередь необходимо указать имя первого соседа, затем добавить символ + и имя второго соседа (того, к которому мы желаем применить стиль). Можно создавать и более длинные комбинации. Схема написания селектора такая: selector1+selector2+…+selectorN {} (стиль применяется к selectorN).

Примеры написания:

/* Отступ от абзаца до картинки 30px */ p+img { padding-top: 30px; } /* Зеленый цвет для абзаца, который следует после h3 в связке с h2 */ h2+h3+p { color: green; }

Родственные селекторы

Родственные селекторы (другие названия: сестринские, сиблинговые) позволяют выбирать элементы HTML-страницы, являющиеся родственными по отношению друг к другу (то есть имеющие общего родителя и находящиеся на одном уровне). Сестринские селекторы похожи на соседние, но отличаются тем, что стиль применяется ко всем элементам выбранного типа, а не только к первому из них. Вместо знака + используется символ тильда ~ .

Пример: немного изменим предыдущую задачу и представим, что вам нужно сделать наклонный шрифт для всех абзацев

Которые идут после заголовка

. Код CSS будет выглядеть так:

H1 ~ p { font-style: italic; }

…и немного HTML для примера:

Заголовок 1

Заголовок 2

Взгляните на HTML-код: стиль применится ко всем тегам

Которые следуют после тега

и находятся до закрывающего тега родителя

. В нашем варианте насчитывается 3 элемента

К которым применится стиль. Обратите внимание, что тег

этому никак не помешает. Заметьте также, что в данном случае стиль не будет применен к тому тегу

Который находится над

, а также к тегу

Имеющему другого родителя

.

Выводы

Используя соседние (смежные) селекторы, вы можете применять стиль к элементу в случае, когда он следует сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.

С помощью родственных селекторов можно применять стиль ко всем элементам выбранного типа в случае, когда они следуют сразу за другим элементом (или группой элементов). Это работает с элементами, которые находятся на одном уровне и имеют общего родителя.

Описание

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

Синтаксис

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 ).

Синтаксис CSS несложен, и для понимания его совсем не нужно иметь степень доктора в области IT. Однако, это один из немногих популярных языков, который не является логичным в самом прямом смысле этого слова. В отличие от других языков веб-программирования, таких как JavaScript и PHP, в CSS проблемы не решаются с помощью обычной логики. Алгоритмы типа «если X, то сделать Y, в противном случае сделать Z» или «выбрать все Y, затем сделать с ними X» не могут быть осуществлены в таком языке, как CSS. Проще говоря, это язык, созданный для оформления, язык для дизайнеров, а не девелоперов. Некоторые из опытных программистов, с которыми я работал, именно по этой причине тратили много усилий на то, чтобы освоить CSS.

Обучение CSS начинается с классов и ID, а также с использования. и # для непосредственного обозначения элементов. Этого достаточно чтобы построить полнофункциональный веб-сайт, но это не достаточно гибкое решение в случае полной смены дизайна. Давайте взглянем на альтернативный подход к управлению такими труднодоступными элементами.

Соседний родственный комбинатор

Начнём с селектора, который удобен в сложных ситуациях, - с соседнего родственного комбинатора. Соседний родственный комбинатор обозначается соединением двух элементов с помощью знака +:

H1 + p
Это выделяет следующий p-элемент, расположенный сразу после h1-элемента в DOM. Типографическая теория предполагает, что мы должны использовать отступы в параграфах текста, но только если они следуют за другим параграфом. На практике это может быть использовано, чтобы сделать отступы во всех параграфах, кроме первого:
p + p { text-indent: 1em; }
Это гораздо удобней, чем выделять первый параграф с помощью class=«first». Три строки, никаких классов и полная поддержка браузеров. Если вы располагаете тэги img, относящиеся к наполнению сайта, внутри тэгов p (как, собственно, и следует делать), можно просто отодвинуть их левые поля обратно с помощью негативного значения -1em:
p + p img { margin-left: -1em; }
Довольно просто, правда? А что, если нам захочется выделить первую строку всех параграфов, которые стоят сразу после заголовков, не изменяя всех остальных параграфов? Опять-таки мы можем использовать класс представления. Простой селектор, сделанный из соседнего составного комбинатора, и псевдо-элемент справятся с задачей:
h1 + p::first-line { font-variant: small-caps; }
Примечание: псевдо-элемент:first-line принят в CSS 2.1, в CSS 3 используется запись::, с целью установить различие между псевдо-классами и псевдо-элементами.

Наследственный комбинатор

Обычный протокол разметки – это помещение разделов в как-либо названном элементе в #page или #wrap:

Здравствуйте, уважаемые читатели! Продолжаем тему CSS селекторов и сегодня я постараюсь доступно объяснить, что такое соседние CSS селекторы , а также какую роль играет универсальный селектор . Знание механизма использования всех видов средств CSS позволит достичь оптимального и компактного содержания документа, где описаны стили элементов, что является одной из составляющих успешной раскрутки своего ресурса, так что ни в коем случае не пренебрегайте возможностью получить полезную информацию о понятии селектора и его всевозможных видах.

Если вы помните и внимательно следите за публикациями, уже были рассмотрены многие виды селекторов, ; ; . Еще раз призываю не пренебрегать изучением основ CSS, поскольку это даст вам массу преференций в будущем.

Универсальный селектор

Теперь переходим непосредственно к сути сегодняшней публикации. Что касается универсального селектора, то это совсем просто, поэтому долго на нем останавливаться не буду. Синтаксис написания правила CSS, которое использует универсальный селектор, следующий:

Здесь оператор «*» и означает, что перед нами универсальный селектор. Он используется тогда, когда необходимо установить единый стиль для всех элементов на вебстранице. Иногда универсальный селектор указывать не обязательно. Например, запись.*class и.class в этих случаях совершенно идентичны. Теперь обязательно пример. Обычно наиболее распространенным является определение единого шрифта, размера и цвета, а также расположения обычного текста на странице блога или сайта.

* { font-family: Tahoma, Arial, Helvetica, sans-serif; /* Шрифт для текста */ color: #646464; /* Цвет текста */ font-size: 75%; /* Размер текста */ text-align: left; /* Расположение текста */ }

Таким образом можно определить оформление текста для всех элементов, которые расположены на странице. Отмечу, для данного случая результат будет аналогичным, если вместо универсального селектора использовать название тега body, в состав которого входят теги всех элементов.

Соседние селекторы CSS

Ну, а теперь немного больше времени уделим соседним селекторам. Соседними являются элементы веб-страницы, когда они находятся непосредственно рядом друг с другом в коде документа. При этом синтаксис стилей CSS имеет такой вид:

Теперь возьмем абзац текста, определяемый тегом p, в который в качестве дочерних элементов будут входить теги b, i и big, определяющие форматирование текста, соответственно выделение жирным, курсивом и выделение путем увеличения шрифта:

В этом абзаце используются тег b, тег i, тег big.

И с помощью средства редактирования CSS и HTML, которое встроено в новейших версиях всех популярных браузеров ( , ) и которое является аналогом знаменитого плагина для браузера Firefox (), вставим этот абзац в любое место на абсолютно любой web-странице (я это сделал прямо на странице предыдущей статьи первым параграфом). Это средство, к примеру, в Хроме вызывается простым нажатием клавиши F12. Его можно использовать для практического закрепления материала рубрик «Основы HTML» и «Учебник CSS». Итак, я вставляю кусок текста в виде первого параграфа:

Этот параграф будет подопытным и на его примере рассмотрим применение соседних селекторов . Как я уже сказал, теги b, i и big являются дочерними для тега абзаца p, поскольку все они находятся непосредственно внутри контейнера p. Здесь соседними являются теги b и i, а также i и big. Теперь применим CSS правило для соседних селекторов:

B+i {color: red;} i+big {color: green;}

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

Это справедливо для всех тегов вебстраницы, в состав которых входят элементы b, i и big. Причем, рядом обязательно должны находится b и i, i и big, для других сочетаний это CSS правило работать не будет. Я думаю, теперь вам ясно, как применяются соседние селекторы при написании или редактировании CSS документа. Еще одно очень важное замечание: если вы успели заметить, то в случае соседних элементов заданный стиль применяется только ко второму элементу.

Пример с абзацем, который был рассмотрен очень наглядный и позволяет быстро уяснить суть соседних селекторов в CSS. Однако на практике обычно используются другие области приложения соседних селекторов. Скажем, очень часто в тело статьи необходимо включить какой-то кусок текста, особенно оформленный, как то: сноски, примечания и т.д.

Для этих целей обычно создают отдельный class и применяют его к нужному абзацу. Но гораздо более оптимальным путем является применение соседних селекторов. Например, на моем блоге существуют стили, созданные для оформления обычного заголовка h3.

H3 { font-size: 1.7em; /* Размер шрифта */ text-align: center; /* Размещение текста */ font-weight: normal; /* Нормальное начертание текста */ font-family: Tahoma, Arial, Helvetica, sans-serif; /* Стиль шрифта */ color: #646464; /* Цвет текста */ }

Для выделения заголовка примечания или сноски зададим особый класс, скажем, put:

H3.put { color: red; /* Цвет текста */ margin-left: 5px; /* Отступ слева */ margin-top: 0.5em; /* Отступ сверху */ padding: 10px; /* Поля вокруг текста */ text-align: left; /* Расположение текста */ }

Теперь воспользуемся соседними селекторами для создания особого стиля абзаца сноски, этот абзац будет размещаться непосредственно под заголовком со стилем «h3.put»:

H3.put+p { background: #ffefd5; /* Цвет фона */ margin-left: 15px; /* Отступ слева */ margin-right: 120px; /* Отступ справа */ margin-top: 0.5em; /* Отступ сверху */ padding: 5px; /* Поля вокруг текста */ }

Опять воспользовавшись инструментом для редактирования Google Chrome, которым я вам все уши прожужжал (но он того стоит), вписываем заголовок для сноски, не забыв проставить для него класс put:

Внимание!

Затем пишем текст самой сноски:

Материалы, представленные в данной публикации, являются очень важными в плане изучения основ CSS (каскадных таблиц стилей)

.

После всех этих телодвижений получаем такой абзац сноски на вебстранице (напоминаю, что этот параграф я вставил в конце предыдущей моей статьи о дочерних и контекстных селекторах):

Теперь на блоге или сайте при привязке класса «put» к любому тегу h3 будет вырисовываться такая сноска на web-странице. Причем оформлен особым образом будет только первый абзац после тега h3 с «class=“put”». Но ведь именно этого мы и добивались, верно?

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

Соседние селекторы CSS

Соседние селекторы 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 не понимает соседние селекторы (как и дочерние). Помните об этом.

Домашнее задание.

1. Создайте на странице обычный двухколоночный макет с меню. Пусть у элементов списка меню будут макеры-изображения.
2. Сделайте так, чтобы, если после тега заголовка

Facebook

Twitter

Вконтакте

Google+

Ноутбук