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

Question

As w3schools puts it , they sound the same.

CSS Link W3Schools

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

div ~ p
Selects each <p> element preceded by a <div> element

If the <p> element is immediately after the <div> element, does this mean that the <p> element is preceded by the <div> element?

Anyway, I'm looking for a selector where I can select an element that immediately fits before this element.

Answer 1

Adjacent selector rollers X + Y

Adjacent selector groups 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, he will select only the element immediately preceded by the previous 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 Selector Rollers X ~ Y

The combinator separates the two selectors and matches the second element only if it is preceded by the first, and both share a common ancestor.

 ul ~ p { color: red; } 

This combiner is similar to X + Y, however it is less strict. While the adjacent selector (ul + p) will select only the first element immediately preceded by the previous selector, this one is more general. He will select, referring to our example above, any p elements if they follow 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

code.tutsplus

General Selector Castors MDN

Adjacent selector rollers w3

Answer 2

If the <p> element is immediately after the <div> element, does this mean that the <p> element is preceded by the <div> element?

It is right. In other words, div + p is its own subset of div ~ p - everything that matches the first is also subject to the latter as necessary.

The difference between + and ~ is that ~ matches all of the following siblings, regardless of their proximity to the first element, if they both have the same parent.

Both of these points are most briefly illustrated by one example, where each rule applies a different property. Note that the single p that immediately follows the div has both rules:

 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> 

Anyway, I'm looking for a selector where I can select an element that immediately fits before this element.

Unfortunately, not yet.

Answer 3

consider this example:

 p + p { /* the first p immediately after a preceding p */ color: red; } p ~ p { /* all p 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> 

Answer 4

1) Adjacent selectors (S1 + S2)

The sibling selector is used to select the specified item, which is located directly next to another specified item. Both elements must be on the same level.

 div + p { color:red; } 

Adjacent Selectors Example

2) Common siblings selectors (S1 ~ S2)

The brother’s common selector is used to select all the specified sibling elements of another specified element.

 div ~ p { color:red; } 

An example of a common choice of siblings

Selector of adjacent brother (S1 + S2) and common brother (S1 ~ S2):

The sibling selector (S1 + S2) selects only the immediate sibling element, but the common sibling selector (S1 ~ S2) selects all sibling elements of the other specified element. In both cases, both elements (S1 and S2) must be at the same level.