Differenza tra i selettori div + p (più) e div ~ p (tilde)

Per come lo esprimono le scuole , suonano allo stesso modo.

Riferimento CSS di W3Schools

div + p
Seleziona tutti gli <p>elementi che vengono posizionati immediatamente dopo gli <div>elementi

div ~ p
Seleziona ogni <p>elemento che è preceduto da un <div>elemento

Se un <p>elemento è immediatamente dopo un <div>elemento, non significa che l' <p>elemento è preceduto da un <div>elemento?

Ad ogni modo, sto cercando un selettore in cui posso selezionare un elemento che si trova immediatamente prima di un dato elemento.

Selettori fratelli adiacenti X + Y

I selettori di pari livello adiacenti hanno la seguente sintassi: E1 + E2, dove E2 è l'oggetto del selettore. Il selettore corrisponde se E1 ed E2 condividono lo stesso genitore nell'albero del documento ed E1 precede immediatamente E2, ignorando i nodi non elementi (come i nodi di testo e i commenti).

ul + p {
   color: red;
}

In questo esempio selezionerà solo l'elemento immediatamente preceduto dall'elemento precedente. In questo caso, solo il primo paragrafo dopo ogni ul avrà il testo rosso.

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>

Selettori di pari livello generale X ~ Y

Il combinatore ~ ​​separa due selettori e corrisponde al secondo elemento solo se è preceduto dal primo ed entrambi condividono un genitore comune.

ul ~ p {
   color: red;
}

Questo combinatore di pari livello è simile a X + Y, tuttavia è meno rigoroso. Mentre un selettore adiacente (ul + p) selezionerà solo il primo elemento immediatamente preceduto dal primo selettore, questo è più generalizzato. Selezionerà, facendo riferimento al nostro esempio sopra, qualsiasi elemento p, purché segua 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>

fonte

code.tutsplus

Selettori di pari livello generale MDN

Selettori fratelli adiacenti w3

Se un <p>elemento è immediatamente dopo un <div>elemento, non significa che l' <p>elemento è preceduto da un <div>elemento?

Questo è corretto. In altre parole, div + pè un sottoinsieme appropriato di div ~ p- tutto ciò che corrisponde al primo è anche abbinato al secondo, per necessità.

La differenza tra +e ~è che ~corrisponde a tutti i fratelli seguenti indipendentemente dalla loro vicinanza al primo elemento, purché condividano entrambi lo stesso genitore.

Entrambi questi punti sono illustrati in modo più sintetico con un unico esempio, in cui ogni regola applica una proprietà diversa. Si noti che quello pche segue immediatamente divha applicato entrambe le regole:

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>

Ad ogni modo, sto cercando un selettore in cui posso selezionare un elemento che si trova immediatamente prima di un dato elemento.

Sfortunatamente, non ce n'è ancora uno .

considera questo esempio:

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) Selettori di fratelli adiacenti (S1 + S2)

Il selettore di pari livello adiacente viene utilizzato per selezionare un elemento specificato che è immediatamente accanto a un altro elemento specificato. Entrambi gli elementi dovrebbero essere allo stesso livello.

div + p {
    color:red;
}

Esempio di selettori di fratelli adiacenti

2) Selettori generali di pari livello (S1 ~ S2)

Il selettore di pari livello generale viene utilizzato per selezionare tutti gli elementi di pari livello specificati di un altro elemento specificato.

div ~ p {
   color:red;
}

Esempio di selettori di pari livello generale

Selettori Fratello adiacente (S1 + S2) vs Fratello Generale (S1 ~ S2):

Il selettore del fratello adiacente (S1 + S2) seleziona solo l'elemento fratello immediato, ma il selettore fratello generale (S1 ~ S2) seleziona tutti gli elementi fratello di un altro elemento specificato. Entrambi i casi, entrambi gli elementi (S1 e S2) dovrebbero essere allo stesso livello.

I selettori rimanenti sono spiegati qui: https://www.csssolid.com/35-css-selectors-to-remember.html