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

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

Синтаксис написания правила 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». Итак, я вставляю кусок текста в виде первого параграфа:

Текст абзаца, который вставлен на вебстраницу с помощью инструмента разработчика браузера Google Chrome

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

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

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

Вид испытуемого абзаца после применения CSS правила с соседними селекторами

Теперь содержание тега 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>.

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

Абзац сноски в браузере после применения соседних селекторов в правиле CSS

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

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Ирина

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

    Ответить
  2. Антонина

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

    Ответить