Having a hard time understanding the difference between Adjacent Sibling Selector and General Sibling Selector

[cvillela]

This is not a question specific to a project in FCC. I’m trying to understand the different selectors in CSS. I’m really stuck on the adjacent/general sibling vs. the child selector combinators. I’ve read several blogs and articles and I’m just not grokking it. I don’t understand the difference between, for example
div p{}
and
div ~ p{}

Thanks in advance if anyone has time to answer!

[hbar1st]

i think it helps to understand that the elements are all hypothetically laid out like a family tree. There is the top of the tree and then everything branches out from it in various relationships (siblings, children, parents, descendants)

so for this selector:
div p
you are saying you want all paragraph elements who are descendants of the div element (no matter how deeply nested).

while
div ~ p
says that you want to select the p element that is a sibling of the div element and is ‘next in line’ to it (like a younger sibling). Eg.
<div></div><p></p>
These two are siblings. You would select the p element in this case.
<p></p><div></div> these two are also siblings but you would not be selecting the p in this case because it -precedes- the div (like an older sibling)
<div></div><span></span><h1></h1><p></p> here the p is still a sibling of divand would be selected because it follows the div (even though it does not immediately follow it)

hope this helps

[cvillela]

Yes, that is amazingly helpful. Thank you so so much!