Descendant vs Child Selectors in CSS
I have had a few questions recently about the difference between the descendant and child selectors in CSS. The whole ancestry thing can be confusing, but hopefully this will clear it up for you.
First, it's helpful to understand what these words mean in reference to the English language.
My daughter is my child and my descendant (Direct descendant). Child Selector - div > p
My grand-daughter is my descendant, but not my child. Descendant selector - div p
Let's take a look at some example code and how this would look.
Below we have a table with a paragraph nested in the td. If we wanted to change the case to UPPERCASE, we would use the descendant selector, div p.
We do this because the Paragraph is a descendant, as it's nested inside the main div, but it's not a child. In this case, the Table would be the child (Or direct descendant)
<div> <table> <tr> <td> <p>...</p> </td> </tr> </table> </div>
You can find a good visual reference of the document tree at MaxDesign.co.uk