Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css » Sosednie-selektory

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

В отличие от контекстных селекторов соседние используются реже. Главное отличие состоит в том, что они должны следовать за другим. Чтобы вам легче было усвоить данную тему, предлагаю разобрать вот такую структуру:

<тег1>
   <тег2></тег2>
   <тег3></тег3>
   <тег4></тег4>
   <тег5><тег6>...</тег6></тег5>
</тег1>

Как вы, наверное, догадались из предыдущего урока, что теги 2, 3, 4, 5, 6 являются контекстными селекторами для тега1. В свою очередь соседними селекторами будут являться: тег2 и тег3, тег4 и тег5, но в тоже время тег2 и тег4 не являются соседними. Свойства стилей будут применяться на последний элемент который вы укажите соседним. Вам лишь следует соблюдать по очередность селекторов. Общий синтаксис написания такой:

селектор1 + селектор2+ ...+селекторN { свойство1: значение; свойство2: значение; ... свойствоN: значение}

Давайте рассмотрим с вами вот такой пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; 
charset=utf-8">
  <title>Соседние селекторы</title>
  <style type="text/css">
   h1 + p {
    color: navy; /* темно-синий цвет текста параграфа, 
когда он соседний с H1 */
   }
 em + strong {
    text-decoration: underline; /* подчеркнутый текст у тега 
STRONG, когда он является соседним с тегом EM*/
   }
   h1 + p + div {
    color: green; /* зеленый цвет текста внутри блока DIV, 
когда он стоит сразу после тега P, 
который в свою очередь стоит сразу после тега H1 */
   padding: 6px; /* Поля вокруг текста */
   background: #ddd; /* Цвет фона */
   margin-left: 35px; /* Отступ слева */
   margin-top: 25px; /* Отступ сверху */   
   }
  </style>
 </head>
 <body>
  <h1>Заголовок</h1>  
  <p> Тег <em>p</em> является соседним селектором с тегом 
<strong>h1</strong></p>
  <div>Этот текст должен быть зеленого цвета</div>
 </body>
</html>

Результат вы можете видеть на рисунке ниже:

Применение соседних селекторов

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



наверх