Ancestor, Descendant, Sibling, Parent, Child – Explained

Many, especially non-English speakers get confused with what does Ancestor, Descendant, Sibling, Parent and Child mean. Here are explanations with descriptions and example diagrams with html tags and people hierarchy so that is easier for less technical people to understand it.

Ancestor

An ancestor is any element which is connected further up in the hierarchy tree – no matter how many levels higher.

An ancestor is a parent, grandparent, great-grandparent, and so on.

Grace, Alice and Jake are ancestors of Luca
Caitlin and Jake are ancestors of Ben
Jake is an ancestor for both Luca and Ben
Jake is the ancestor of all other people in the tree.

p, div and body are ancestors of strong
div and body are ancestors of ul
body is an ancestor for both strong and ul
body is the ancestor of all other elements in the tree.

Descendant

A descendant refers to any element that is connected lower down the hierarchy tree – no matter how many levels lower.

A descendant is a child, grandchild, great-grandchild, and so on.

Grace has one descendant – Luca
Caitlin has 4 descendants – Ben, Megan, Eva and Harry
Sean has no descendants

All people in the tree under Jake are his
descendants.

p has one descendant – strong
div has 4 descendants – ul, li, li, li
h2 has no descendants

All elements in the tree under body are its descendants.

Parent

An element which is directly above and connected to an element below in the hierarchy tree.

Each element has only one parent – except for root (top most element). It does not have parent as it does not have any element linked above it.

Examples

Caitlin is a parent of Ben
Jake is a parent of Alice

div is a parent for ul
body is a parent for div

Child

An element that is directly below and connected to an element above in the hierarchy tree.

Element can have 0 or many child items.

Examples

Ben is a child of Caitlin
Alice is a child of Jake

ul is a child for div
div is a child for body

Sibling

A sibling is an element which shares the same parent with another element.

Siblings share the same parent.

Examples

Adam, Grace, Jay and Seab

are siblings as they share the same parent

Alice

Ben

has no sibling as his parent

Caitlin

does not have any other child.

h1, p, img and h2 are siblings as they share the same parent div
ul has no sibling as its parent div does not have any other child element.