Quelle est la différence entre les sélecteurs `div p` et `div ~ p` en CSS ?

Comprendre les sélecteurs Div P et Div ~ P

Les sélecteurs div p et div ~ p ciblent les éléments HTML en fonction de leur relation au sein du arborescence des documents. Cependant, il existe une différence subtile entre les deux.

• Div P (sélecteur plus) : Sélectionne tous les

  les éléments qui suivent immédiatement

  éléments, sans éléments intermédiaires.
• Div ~ P (sélecteur tilde) : Sélectionne tous les éléments

  les éléments précédés de

  éléments, quelle que soit la distance.

Quand utiliser le sélecteur Plus

Utilisez le sélecteur lorsque vous souhaitez cibler uniquement l'élément immédiatement adjacent à l'élément donné élément. Par exemple, si vous avez un

<code class="css">div + p {
  color: red;
}</code>

<code class="css">div ~ h2 {
  color: blue;
}</code>

<code class="css">ul + p {
  color: red;
}</code>