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

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{}
div ~ p{}

Thanks in advance if anyone has time to answer!

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).

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.
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

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

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.