The way that w3schools phrases it, they sound the same.
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.
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>General sibling selectors X ~ Y
The ~ combinator separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.
ul ~ p {
color: red;
}
This sibling combinator is similar to X + Y, however, it's less strict. While an adjacent selector (ul + p) will only select the first element that is immediately preceded by the former selector, this one is more generalized. It will select, referring to our example above, any p elements, as long as they follow a 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>Source
If a
<p>element is immediately after a<div>element, doesn't that mean that the<p>element is preceded by a<div>element?
This is correct. In other words, div + p is a proper subset of div ~ p — anything matched by the former is also matched by the latter, by necessity.
The difference between + and ~ is that ~ matches all following siblings regardless of their proximity from the first element, as long as they both share the same parent.
Both of these points are most succinctly illustrated with a single example, where each rule applies a different property. Notice that the one p that immediately follows the div has both rules applied:
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>Anyhow, I'm looking for a selector where I can select an element that is place immediately before a given element.
Unfortunately, there isn't one yet.
consider this example:
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) Adjacent Sibling Selectors (S1 + S2)
Adjacent sibling selector is used to select a specified element which is immediate next to another specified element. Both elements should be in the same level.
div + p {
color:red;
}
Adjacent Sibling Selectors example
2) General Sibling Selectors (S1 ~ S2)
General sibling selector is used to select all specified sibling elements of another specified element.
div ~ p {
color:red;
}
General Sibling Selectors example
Adjacent Sibling(S1 + S2) vs General Sibling(S1 ~ S2) selectors:
Adjacent sibling(S1 + S2) selector selects immediate sibling element only but general sibling(S1 ~ S2) selector selects all sibling elements of another specified element. Both cases, both elements(S1 and S2) should be in the same level.
Remaining selectors are explained here: https://www.csssolid.com/35-css-selectors-to-remember.html
Both + and ~ are CSS sibling selectors. But used for two different purposes. See how the color changes in the next sibling/ siblings in both scenarios. For both scenarios, I used different selectors. But you can use any selector to play with this.
+ - Will apply styles to only the next sibling of the first selector.#as-h2+#as-p {
color: red;
}<h2 id="as-h2">Adjacent Sibling Example</h2>
<p id="as-p">I'm the adjacent sibling</p>
<p id="as-p">I'm distance from heading</p>~ - Will apply styles to all the siblings who come after the first selector..gs-h2~.gs-p {
color: blue;
}<h2 class="gs-h2">General Sibling Example</h2>
<p class="gs-p">I'm the general sibling</p>
<p class="gs-p">I'm general sibling distance from heading 2</p>