css - Difference between the selectors div + p (plus) and div ~ p (tilde)

Question

The way that w3schools phrases it, they sound the same.

W3Schools' CSS reference

div + p
Selects all <p> elements that are placed immediately after <div> elements

div ~ p
Selects every <p> element that are preceded by a <div> element

If a <p> element is immediately after a <div> element, doesn't that mean that the <p> element is preceded by a <div> element?

Anyhow, I'm looking for a selector where I can select an element that is place immediately before a given element.

Answer 1

Adjacent sibling selectors X + Y

Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments).

ul + p {
   color: red;
}

In this example it will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

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>