Різниця між селекторами div + p (плюс) та div ~ p (тильда)

Те, як w3schools формулює це, звучить однаково.

Посилання на CSS W3Schools

div + p
Виділяє всі <p>елементи, які розміщуються відразу після <div>елементів

div ~ p
Виділяє кожен <p>елемент, якому передує <div>елемент

Якщо <p>елемент знаходиться відразу після <div>елемента, чи не означає це, що <p>елементу передує <div>елемент?

У будь-якому випадку, я шукаю селектор, де я можу вибрати елемент, який розміщується безпосередньо перед даним елементом.

Сусідні селектори X + Y

Сусідні селектори сестер мають такий синтаксис: E1 + E2, де E2 є предметом селектора. Селектор збігається, якщо E1 та E2 мають один і той самий батько в дереві документів, а E1 безпосередньо передує E2, ігноруючи неелементні вузли (наприклад, текстові вузли та коментарі).

ul + p {
   color: red;
}

У цьому прикладі він виділить лише той елемент, якому безпосередньо передує попередній елемент. У цьому випадку лише перший абзац після кожного ul матиме червоний текст.

ul + p {
    color: red;
}

<div id="container">
    <ul>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
        <li>List Item</li>
    </ul>
    <p>This will be red</p>
    <p>This will be black</p>
    <p>This will be black</p>
</div>

Загальні селектори X ~ Y

Комбінатор ~ відокремлює два селектори та відповідає другому елементу, лише якщо йому передує перший, і обидва мають спільний батьківський елемент.

ul ~ p {
   color: red;
}

Цей комбінатор братів і сестер схожий на X + Y, однак він менш суворий. Хоча сусідній селектор (ul + p) буде вибирати лише перший елемент, який безпосередньо передує колишньому селектору, цей є більш узагальненим. Він виділить, посилаючись на наш приклад вище, будь-які p елементи, якщо вони слідують за ul.

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

Джерело

код.tutsplus

Загальні селектори братів і сестер MDN

Сусідні селектори сестер w3

Якщо <p>елемент знаходиться відразу після <div>елемента, чи не означає це, що <p>елементу передує <div>елемент?

Це вірно. Іншими словами, div + pце власне підмножина з div ~ p- нічого , що співпала з колишнім є також відповідає останнім, в разі потреби.

Різниця між +і ~полягає в тому~ відповідає всім наступним братам та сестрам незалежно від їх сусідства з першим елементом, якщо вони обидва мають одного батька.

Обидва ці пункти найбільш стисло проілюстровано на одному прикладі, де кожне правило застосовує різні властивості. Зверніть увагу, що до того, pщо безпосередньо слідує, застосовуються divобидва правила:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}

<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

У будь-якому випадку, я шукаю селектор, де я можу вибрати елемент, який розміщується безпосередньо перед даним елементом.

На жаль, його ще немає .

розглянемо цей приклад:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 

<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

1) сусідні селектори (S1 + S2)

Сусідній селектор сестри використовується для вибору вказаного елемента, який знаходиться безпосередньо поруч з іншим зазначеним елементом. Обидва елементи повинні бути на одному рівні.

div + p {
    color:red;
}

Приклад сусідніх селекторних братів

2) Загальні селектори (S1 ~ S2)

Загальний селектор братів і сестер використовується для вибору всіх заданих елементів братів або сестер іншого вказаного елемента.

div ~ p {
   color:red;
}

Приклад загальних селекторів

Селектори сусіднього брата (S1 + S2) проти сектора загального брата (S1 ~ S2):

Сусідній селектор (S1 + S2) вибирає лише безпосередній елемент брата або сестри, але загальний селектор (S1 ~ S2) вибирає всі елементи брата або сестри іншого вказаного елемента. В обох випадках обидва елементи (S1 і S2) повинні знаходитися на одному рівні.

Інші селектори пояснюються тут: https://www.csssolid.com/35-css-selectors-to-remember.html