Контекстный селектор ссылается на всех потомков родительского элемента, в том числе и непрямых потомков.
Рассмотрим следующий код:

<div class="sidebar">
   <p>Этот параграф будет отображен белым цветом.</p>
   <p>Этот тоже.</p>
   <div class="tagline">
      <p>Если мы используем прямых потомков, то текст будет белым, 
         если дочернй селектор, то синим.</p>
   </div>
</div>

В данном примере используется контекстный селектор из предыдущего раздела – .sidebar p. Он ссылается на все элементы p, вложенные в div класса .sidebar p, включая и абзацы, расположенные внутри div класса
tagline. Чтобы указанное оформление распространялось исключительно на прямых потомков элемента div класса sidebar, следует использовать дочерний селектор. Для указания прямого потомка в селекторе используется знак >.

В приведенном ниже коде используется новый селектор для задания белого цвета текста абзацев, расположенных непосредственно внутри элемента div класса sidebar (но не внутри элемента div класса tagline):

p {
color: #0000FF;
}
.sidebar>p {
color: #FFFFFF;
}