Diferencia entre los selectores div + p (plus) y div ~ p (tilde)

La forma en que w3schools lo expresa , suenan igual.

Referencia de CSS de W3Schools

div + p
Selecciona todos los elementos

que se colocan inmediatamente después de los elementos

div ~ p
Selecciona cada elemento

que está precedido por un elemento

Si un elemento

está inmediatamente después de un elemento

, ¿no significa eso que el elemento

está precedido por un elemento

?

De todos modos, estoy buscando un selector donde pueda seleccionar un elemento que se coloque inmediatamente antes de un elemento dado.

Selectores de hermanos adyacentes X + Y

Los selectores de hermanos adyacentes tienen la siguiente syntax: E1 + E2, donde E2 es el sujeto del selector. El selector coincide si E1 y E2 comparten el mismo elemento primario en el árbol de documentos y E1 precede inmediatamente a E2, ignorando los nodos que no son elementos (como los nodos de texto y los comentarios).

 ul + p { color: red; } 

En este ejemplo, seleccionará solo el elemento que está inmediatamente precedido por el elemento anterior. En este caso, solo el primer párrafo después de cada ul tendrá texto rojo.

 ul + p { color: red; } 
 
  • List Item
  • List Item
  • List Item
  • List Item

This will be red

This will be black

This will be black

Si un elemento

está inmediatamente después de un elemento

, ¿no significa eso que el elemento

está precedido por un elemento

?

Esto es correcto. En otras palabras, div + p es un subconjunto propio de div ~ p – cualquier cosa emparejada por la primera también es igualada por la segunda, por necesidad.

La diferencia entre + y ~ es que ~ coincide con todos los hermanos siguientes, independientemente de su proximidad con respecto al primer elemento, siempre que ambos compartan el mismo padre.

Ambos puntos se ilustran más sucintamente con un solo ejemplo, donde cada regla aplica una propiedad diferente. Observe que el p que sigue inmediatamente al div tiene ambas reglas aplicadas:

 div + p { color: red; } div ~ p { background-color: yellow; } 
 
Div

Paragraph

Paragraph

Paragraph

No div

Paragraph

Paragraph

Paragraph

considera este ejemplo:

 p + p { /* the first p immediately after a preceding p */ color: red; } p ~ p { /* all p's after a preceding p */ font-weight: bold; } 
 

1

separator

2

3