0

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?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • 1
    I recommend the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors#Combinators) for your learning needs. – TylerH Sep 11 '20 at 16:21

1 Answers1

-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>
Deadpool
  • 7,811
  • 9
  • 44
  • 88