Does the "+" combinator in CSS select only 1 subsequent element, or several?

Question

css

Tell me how exactly the plus sign combinator works, some manuals say that it selects several elements that immediately follow the "parent", other manuals say that only one subsequent element will be selected. Or neither?

Answer 1

a ~ b– right neighbors: all b at the same nesting level that come after a . – first right neighbor: b at the same nesting level that comes immediately after a In lists, it is convenient to set the indents between elements with the combination :

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

sass version:

.list-item {

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

this rule will apply margin-top to all list items except the first one. Of course, assuming all items in the list have the .list-item selector :

<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>