• Home
  • Blog
  • Descendant vs Child Selectors in CSS

Descendant vs Child Selectors in CSS

on in Web and Social
  • Font size: Larger Smaller
  • Comments
  • Print

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

Kray Mitchell hails from Calgary, Alberta, and is an educator at heart. Through speaking, workshops, consulting and training, he aims to assist people with understanding the technology that affects their day to day lives.
blog comments powered by Disqus
       
 Sometimes a teacher, always a student.  StopTheWWW Blue
Peek-a-Boo Kray
What's That Up There Kray
Kray Under Foot
Chillin' Like a Villan Kray