'What is the difference between the Descendant combinator and the subsequent sibling combinator? [duplicate]

To my knowledge,

the descendant combinator (space) targets child and descendants of the parent element.

the subsequent sibling combinator (~) selects all elements that come anywhere after a specified element whether its adjacent or not.

So with that definition wouldn't H1 p and H1 ~ p give me the same selection results every time?

The fact that both of these are even a thing, tells me that they have their purpose... So what am I missing?

EDIT** Correct me if I'm wrong - but after further research, I think I got it.

The (~) selects all elements that come AFTER a specified element. While the (space) selects all elements that are INSIDE of a specified element?

htmlcsscss-selectors


Solution 1:[1]

So with that definition wouldn't H1 p and H1 ~ p give me the same selection results every time?

Ans: Totally Wrong ...

The (~) selects all elements that come AFTER a specified element. While the (space) selects all elements that are INSIDE of a specified element?

Ans: Yep, this one is correct.

To Clarify:

Space_Selector: Selects all the elements inside the selector.

div p {background: red;}
<p>paragraph 1.</p>
<p>paragraph 2.</p>
<p>paragraph 3.</p>
<div>
  <p>paragraph 4.</p>
  <p>paragraph 5.</p>
  <p>paragraph 6.</p>
</div>
<p>paragraph 7.</p>
<p>paragraph 8.</p>
<p>paragraph 9.</p>

Tilde/Sibling Selector (selects all coming/later siblings):

div ~ p { background: yellow;}
<p>paragraph 1.</p>
<p>paragraph 2.</p>
<p>paragraph 3.</p>
<div>
  <p>paragraph 4.</p>
  <p>paragraph 5.</p>
  <p>paragraph 6.</p>
</div>
<p>paragraph 7.</p>
<p>paragraph 8.</p>
<p>paragraph 9.</p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Deadpool

Related Questions