Почему селектор + работает точно также как селектор ~?

Question

Насколько я понимаю, селектор + задает стиль для первого элемента после соседнего; селектор ~ применяется после выбранного тэга ко всем элементам выбранного типа (их может быть несколько).

В данном случае селектор + работает так, как должен работать селектор ~.

1. Пример с селектором +:

.bl {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
}

.child_1 + .child_1 {
  background: yellowgreen;
}

<div class="parent">
  <div class="child_4 bl"></div>
  <div class="child_1 bl">1)</div>
  <div class="child_1 bl">1)</div>
  <div class="child_1 bl">1)</div>
</div>

2. Пример с селектором ~:

.bl {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
}

.child_1 ~ .child_1 {
  background: yellowgreen;
}

<div class="parent">
  <div class="child_4 bl"></div>
  <div class="child_1 bl">1)</div>
  <div class="child_1 bl">1)</div>
  <div class="child_1 bl">1)</div>
</div>

Чем можно объяснить одинаковую работу этих селекторов?

Answer 1

Сравните с вот таким вариантом применения:

.bl {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
}

.child_4~.child_1 {
  background: yellowgreen;
}

<div class="parent">
  <div class="child_4 bl"></div>
  <div class="child_3 bl">1)</div>
  <div class="child_2 bl">1)</div>
  <div class="child_1 bl">1)</div>
</div>

.bl {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
}

.child_4+.child_1 {
  background: yellowgreen;
}

<div class="parent">
  <div class="child_4 bl"></div>
  <div class="child_3 bl">1)</div>
  <div class="child_2 bl">1)</div>
  <div class="child_1 bl">1)</div>
</div>

Селектор + выберет только следующий элемент внутри одного родителя. А селектор ~ выберет все элементы (любой элемент), после указанного перед селектором, внутри одного родителя.

Answer 2

child_1 следует за другим child_1.

Надо вот так смотреть. Из-за отсутствия класса на 4м элементе во второй строке разница проявилась на 5м элементе - при плюси он не попадает под условие и нижней границы у него нет. Ну а по верхней границе в обеих строках видно разницу.

.a + .a { border-bottom-color: red; }
.a ~ .a { border-left-color:  blue; }

.a:first-child + .a { border-top-color:  orange; }
.a:first-child ~ .a { border-right-color: green; }

section {
  overflow: hidden;
}

div {
  background: antiquewhite;
  border: 3px solid transparent;
  float: left;
  margin: .25em;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
}

<section>
  <div class="a">1</div>
  <div class="a">2</div>
  <div class="a">3</div>
  <div class="a">4</div>
  <div class="a">5</div>
  <div class="a">6</div>
  <div class="a">7</div>
</section>

<section>
  <div class="a">1</div>
  <div class="a">2</div>
  <div class="a">3</div>
  <div          >4</div>
  <div class="a">5</div>
  <div class="a">6</div>
  <div class="a">7</div>
</section>

БЛОГ НА HUSL

Почему селектор + работает точно также как селектор ~?

Ответы (2 шт):