In your markup all the ul elements are children of the p elements.
This selector
- $("p ~ span").css("color", "red");
will match the spans that are not inside the p elements
- <p>
- <span>this a span</span>
- </p>
- <span>a matched span</span>
- <br/>
- <span>another matched span</span>
- <p>
- <span>not matched</span>
- </p>
To use the selector you provided, this markup is what would work
- <p>nothing inside this paragraph will be selected, but the list below will be</p>
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
Keep in mind that, in order to be selected, both the prev and the siblings have to have the same parent.
Dave