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

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