Типы отношений элементов в CSS

Прежде чем перейти к изучению селекторов кратко вспомним какие отношения есть у элементов.

Предок ancestor - потомок descendant

Элемент потомок находится в элементе предке, но при этом предок может не быть его родителем (потомок может быть вложен в другой элемент, также являющийся потомком для рассматриваемого предка).

В качестве примера посмотрим разметку

<div>
  div
  <p>
    <span>span</span>
    p
  </p>
  <a>
    a
    <i>i</i>
  </a>
</div>

И стили к ней

div span, 
div i {
      background-color: #2bcc2b;
}

Только span и элемент i подходят под это отношение, так как они могут находиться на любом уровне вложенности от родителя

Пример отношения предок потомок

Предок - потомок представляет собой отношение, где потомок может быть на любом уровне вложенности.

Родитель parent - Ребенок child

Дочерний элемент (ребенок) находится в родительском и других уровней вложенности между ними нет.

В примере выше в разметку добавим нужные стили

div > p {
    background-color: #8250df;
  }

div > a {
  background-color: #df5050;
}

p > span {
  background-color: #f08a8b;
}

a > i {
  background-color: #e3f8ef;
}

В данном примере, элементы p,a,span,i и отношения div > p, div > a, p > span, a > i являются непосредственными дочерними элементами своих родителей.

Пример отношения родитель ребенок

В отношении родитель ребенок, выбираются непосредственные прямые дочерние элементы на первом уровне вложенности

Соседние элементы sibling

Должны иметь одного и того же родителя. Называются смежными (adjacent), если следуют прямо друг за другом.

p + a {
  background-color: #868686;
}

В примере такое отношение наблюдается у элемента a.

Элемент a называется следующим following за элементом p, a p предшествующий preceding элементу.

Пример отношения соседних элементов

В отношении соседних элементов, они должны иметь одного родителя и навигация между ними происходит по принципу предыдущий - следующий.

Остальные элементы

<div>
  div
  <p>
    <span>span</span>
    p
  </p>
  <a>
    a
    <i>i</i>
  </a>
</div>

Элементы span и i, p и i, span и a в примере считаются безотносительными друг к другу, при условии, что они имеют общего предка.

Более подробно в терминах css читаем в разделе Базовые селекторы в css.