Différence entre les sélecteurs div + p (plus) et div ~ p (tilde)

La façon dont w3schools l'exprime , c'est la même chose.

Référence CSS de W3Schools

div + p
Sélectionne tous les <p>éléments placés immédiatement après les <div>éléments

div ~ p
Sélectionne tous les <p>éléments précédés d'un <div>élément

Si un <p>élément est immédiatement après un <div>élément, cela ne signifie-t-il pas que l' <p>élément est précédé d'un <div>élément?

Quoi qu'il en soit, je recherche un sélecteur où je peux sélectionner un élément qui est placé immédiatement avant un élément donné.

Sélecteurs frères adjacents X + Y

Les sélecteurs frères adjacents ont la syntaxe suivante: E1 + E2, où E2 est le sujet du sélecteur. Le sélecteur correspond si E1 et E2 partagent le même parent dans l'arborescence du document et E1 précède immédiatement E2, ignorant les nœuds non élémentaires (tels que les nœuds de texte et les commentaires).

ul + p {
   color: red;
}

Dans cet exemple, il ne sélectionnera que l'élément qui est immédiatement précédé par l'ancien élément. Dans ce cas, seul le premier paragraphe après chaque ul aura du texte en rouge.

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>

Sélecteurs de frères et sœurs généraux X ~ Y

Le combinateur ~ sépare deux sélecteurs et ne correspond au deuxième élément que s'il est précédé du premier, et les deux partagent un parent commun.

ul ~ p {
   color: red;
}

Ce combinateur frère est similaire à X + Y, cependant, il est moins strict. Alors qu'un sélecteur adjacent (ul + p) ne sélectionnera que le premier élément qui est immédiatement précédé par l'ancien sélecteur, celui-ci est plus généralisé. Il sélectionnera, en se référant à notre exemple ci-dessus, tous les éléments p, tant qu'ils suivent un 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>

La source

code.tutsplus

Sélecteurs de frères et sœurs généraux MDN

Sélecteurs frères adjacents w3

Si un <p>élément est immédiatement après un <div>élément, cela ne signifie-t-il pas que l' <p>élément est précédé d'un <div>élément?

C'est correct. En d'autres termes, div + pest un sous - ensemble approprié de div ~ p- tout ce qui correspond au premier est également associé au second, par nécessité.

La différence entre +et ~est que ~correspond à tous les frères et sœurs suivants, quelle que soit leur proximité avec le premier élément, à condition qu'ils partagent tous les deux le même parent.

Ces deux points sont illustrés de manière plus succincte par un seul exemple, où chaque règle applique une propriété différente. Remarquez que celuip qui suit immédiatement le diva les deux règles appliquées:

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>

Quoi qu'il en soit, je recherche un sélecteur où je peux sélectionner un élément qui est placé immédiatement avant un élément donné.

Malheureusement, il n'y en a pas encore .

considérez cet exemple:

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) Sélecteurs frères adjacents (S1 + S2)

Le sélecteur de frère adjacent est utilisé pour sélectionner un élément spécifié qui est immédiatement à côté d'un autre élément spécifié. Les deux éléments doivent être au même niveau.

div + p {
    color:red;
}

Exemple de sélecteurs de frères et sœurs adjacents

2) Sélecteurs de frères et sœurs généraux (S1 ~ S2)

Le sélecteur général des frères et sœurs est utilisé pour sélectionner tous les éléments frères spécifiés d'un autre élément spécifié.

div ~ p {
   color:red;
}

Exemple de sélecteurs de frères et sœurs généraux

Sélecteurs Adjacent Sibling (S1 + S2) vs General Sibling (S1 ~ S2):

Le sélecteur de frère adjacent (S1 + S2) sélectionne uniquement l'élément frère immédiat, mais le sélecteur général de frère (S1 ~ S2) sélectionne tous les éléments frères d'un autre élément spécifié. Dans les deux cas, les deux éléments (S1 et S2) doivent être au même niveau.

Les sélecteurs restants sont expliqués ici: https://www.csssolid.com/35-css-selectors-to-remember.html