Работая с CSS, перед нами постоянно стоит задача составления наиболее рациональных селекторов. Понимание принципа действия селектора потомка становиться одним из ключей к написанию качественного кода.

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

Подробнее о "родственных" связях тегов

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

Например:

p a {
   text-decoration: underline;
}

Всем ссылкам, которые имеют родителя «p», будет применён стиль text-decoration.

Стоит отметить, что уровень вложенности никак не влияет на применения стиля. Так, например, если код будем иметь вид:

<div>
   <p>в тексте идёт<a href=”#”>ссылка </a></p>
   <ul>
      <li>затем список и в нём <a href=”#”>тоже есть ссылка</a></li>
      <li>и строка без ссылки</li>
   </ul>
</div>

То, применяя к такому коду вышеупомянутый стиль CSS, ссылки будут подчеркнуты как в абзаце, так и в списке.

Стоит обратить внимание на длину цепочки селекторов - она ни чем не ограничена. Добавляя в неё дополнительные элементы мы лишь уточняем область, в которой будет применён стиль.

Рассмотрим наш пример с данной точки зрения: CSS добавит подчёркивание всем ссылкам на странице, у которых есть родственник «p», однако если изменить его на:

p li a {
   text-decoration: underline;
}

То первая ссылка, которая вложена только в «p», оформлена не будет, а та, которая вложена как в «p», так и в «li» получит стиль text-decoration.

Где используют?

Этот селектор встречается в практике наиболее часто. И это не удивительно, ведь с помощью его можно определить область влияния стилей. Он даёт нам гарантию, естественно при правильном написании, что стиль будет применён к необходимому нам элементу. Так, если в CSS написано:

.mainContent p {
   font-size: 20px;
   color: red;
}

То весь текст на странице внутри тэга с классом mainContent, который заключён в тэг p будет иметь размер шрифта в 20px и будет красного цвета. Так мы ограничиваем область применения наших стилей.

Часто стоит задача, что бы к одному и тому же элементу на странице были применены разные стили. Конечно, можно добавить к каждому элементу свой индивидуальный класс, например:

<div class=”left”>
   <h1>Список слева</h1>
   <ul>
      <li>Строка красная</li>
      <li>Строка красная </li>
   </ul>
</div>
<div class=”right”>
   <h2>Список справа</h2>
   <ul>
      <li> Строка синяя </li>
      <li> Строка синяя </li>
   </ul>
</div>
 
<style>
   .left li {
      color:red;
   }
   .right li {
      color:blue;
   }
</style>

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

header .button {
   width:500px;
   background: url(image/pic.jpg) no-repeat;
}
footer .button {
   width:150px;
   background: #000;
}

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

Подводя итоги

• Если элемент встречается один раз на странице, то использование селектора потомка может быть не оправданно.

  header .headerNav li {
     vertical-align:top;
     display: inline-block;
  }

  Достаточно будет:

  .headerNav li {
  vertical-align:top;
  display: inline-block;
  }

• Использование лишних потомков говорит лишь о низкой квалификации верстальщика и не даёт ни чего кроме замедления процесса обработки файла CSS.

  form .webform .username input[type=”text”]{
  padding:5px;
  }

  Эту цепочку можно сократить до:

  form input[type=”text”]{
  padding:5px;
  }

• Так как уровень вложенности не влияет на применение оформления к потомку, то стоит лишний раз проверить, не цепляют ли наши стили лишние элементы на странице.