Whilst reviewing CSS Selectors today, I decided to come up with an analogy to help me easily understand and be able to explain it to others. And so this is the analogy I came up with.
I will talk about four types of css selectors, adjacent, child, general and descendant selectors.
In this analogy, I (Lance) am the son of an assumed parent(mother and father). I have three siblings, two (Sarah and Philip) related by blood to me as we both have the same parent and the third, Simon,a son of my father but from a different mother.
A delivery boy has been tasked with delivering gifts to us based on css selectors.
Since I am the reference child, I mostly use h1 html element and my siblings use the h2 element.
Adjacent Sibling
In this scenario, because I am of the same blood as Sarah and Philip, I am adjacent to Philip and I am also adjacent to Sarah. If the delivery boy is tasked to deliver gifts to the adjacent siblings of Lance, he could deliver them to Sarah and Philip.
<body>
<h1> Lance </h1>
<h2> Sarah </h2> <!-- 🎁 -->
<h1> Lance </h1>
<h2> Philip </h2> <!-- 🎁 -->
<h2> Simon </h2>
</body>
<style>
h1 + h2 {
color: red;
}
</style>
General Sibling
In this scenario, the three of us are general siblings not by virtue of being related by the same blood but by virtue of having the same father. Hence Simon is my general sibling and not my adjacent sibling because even though we are of the same father, he is from a different mother. If the delivery boy is tasked to deliver gifts to the general siblings of Lance, he could deliver them to Sarah, Philip and Simon.
<body>
<h1> Lance </h1>
<h2> Sarah </h2> <!-- 🎁 -->
<h1> Lance </h1>
<h2> Philip </h2> <!-- 🎁 -->
<h2> Simon </h2> <!-- 🎁 -->
</body>
<style>
h1 ~ h2 {
color: red;
}
</style>
Child
In this scenario, Sarah and Philip including myself are all children of our parents. Therefore we satisfy the css selector child. Simon however, even though is a child of my father, does not have the same blood as he is from a different mother. The delivery guy in this case, can give the gifts to Sarah, Philip and myself when asked to deliver to the child of my parents.
<!-- main here represents my parents -->
<main>
<h2> Lance </h2> <!-- 🎁 -->
<h2> Sarah </h2> <!-- 🎁 -->
<h2> Philip </h2> <!-- 🎁 -->
<div> <!-- Simon's mother -->
<h2> Simon </h2>
</div>
</main>
<style>
main > h2 {
color: red;
}
</style>
Descendant
In this case, the three of us are all descendants of our father because we are all from the same father and since the reference here is not blood (adjacent) or parents (child) it does not matter that Simon is from a different mother. Now this sort of coincides with general sibling characteristics but the difference is with general sibling, we did not consider the mother of Simon and we just assumed that we are all siblings in the same line from our father. However, in descendant, we are basically using the full family tree of our father including Simon's mom. Hence, the delivery boy can deliver the gift to Simon, Sarah, Philip and myself as we are descendants of my father.
<!-- main here represents my father -->
<main>
<h2> Lance </h2> <!-- 🎁 -->
<h2> Sarah </h2> <!-- 🎁 -->
<h2> Philip </h2> <!-- 🎁 -->
<div> <!-- Simon's mother -->
<h2> Simon </h2> <!-- 🎁 -->
</div>
</main>
<style>
main h2 {
color: red;
}
</style>