Соседние CSS селекторы, универсальный селектор и их применение

Здравствуйте, уважаемые читатели! Продолжаем тему CSS селекторов и сегодня я постараюсь доступно объяснить, что такое соседние 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, определяющие форматирование текста, соответственно выделение жирным, курсивом и выделение путем увеличения шрифта:

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

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

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

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

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

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

Это справедливо для всех тегов вебстраницы, в состав которых входят элементы 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:

<h3 class="put">Внимание!</h3>

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

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

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

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

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

Еще статьи по данной теме:
Самые интересные публикации из рубрики: Учебник CSS

2 отзыва

  1. Антонина

    Очень интересная статья. Добавляю в в избранное.

  2. Ирина

    спасибо. Думаю,многим такая инфо пригодится.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы ввести любой код, вставьте его между [php] и [/php]. Ссылка (URL), помещенная в текст комментария, не будет активной. C целью ее выделения и более удобного копирования можно заключить ее между тегами <pre> и </pre>.