Комбинатор «+» в CSS выделяет только 1 последующий элемент, или несколько?

Question

[Монти Пайтон]

Подскажите, как точно работает комбинатор с знаком плюса, в одних руководствах пишется что он выделяет несколько элементов которые следуют сразу за "родителем", в других руководствах говорится что только один последующий элемент будет выделен. Или ни то ни другое?

Answer 1

[Антон Спирин]

a ~ b – правые соседи: все b на том же уровне вложенности, которые идут после a.
a + b – первый правый сосед: b на том же уровне вложенности, который идёт сразу после a

В списках удобно задавать отступы между элементами комбинацией a + a:

.list-item + .list-item {
  margin-top: 10px;
}

sass версия:

.list-item {

  & + & {
    margin-top: 10px;
  }
}

это правило применит margin-top ко всем элеметнам списка кроме первого. Конечно, при условии что в списке все элементы будут иметь селектор .list-item:

<ul>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <li class="list-item"></li>
  <!--        ...         -->
  <li class="list-item"></li>
</ul>

Answer 2

[Ler Den]

Только к тому, который идёт сразу после