Little Web Hut
(Cascading Style Sheets) CSS 2.1 Reference

CSS Element Relationships

Parent, Child, Sibling, Ancestor, and Descendant Elements

Element relationships are based upon which elements are contained within other elements.

Example:

<body>
  <h1>This is a sample h1 heading</h1>
  <div>
    <h2>This is a sample h2 heading</h2>
    <p>This is sample text.</p>
  <div>
</body>
  • Parent Element - An element that directly contains other elements is a parent of the elements that it contains.
    • In the example above, the <body> element directly contains the <h1> and <div> elements. Therefore, the <body> element is a parent of both the <h1> and <div> elements.
    • In the example above, the <div> element directly contains the <h2> and <p> elements. Therefore, the <div> element is a parent of both the <h2> and <p> elements.
    • In the example above, the <body> element is NOT a parent of the <h2> and <p> elements. Even though the <body> element contains both the <h2> and <p> elements, it does not directly contain them. The <h2> and <p> elements are 2 levels away from the <body> element.
    • Every element has exactly one parent element with the exception of the root element which has no parent.
  • Child Element - An element that is directly contained within another element is a child of the element that contains it.
    • In the example above, the <h1> and <div> elements are directly contained within the <body> element. Therefore, the <h1> and <div> elements are both child elements of the <body> element.
    • In the example above, the <h2> and <p> elements are directly contained within the <div> element. Therefore, the <h2> and <p> elements are both child elements of the <div> element.
    • In the example above, the <h2> and <p> elements are NOT child element of the <body> element. Even though the <h2> and <p> elements are contained within the <body> element, they are not directly contained. The <h2> and <p> elements are 2 levels away from the <body> element.
    • Elements may have multiple child elements.
  • Sibling Elements - Elements are sibling elements if they share the same parent element.
    • In the example above, the <h1> and <div> elements are sibling elements because the <body> element is the parent of both of them.
    • In the example above, the <h2> and <p> elements are sibling elements because the <div> element is the parent of both of them.
  • Ancestor Element - An element that contains (at any level) other elements is an ancestor of the elements that it contains.
    • In the example above, the <body> element contains (at some level) the <h1>, <div>, <h2> and <p> elements. Therefore, the <body> element is an ancestor of all 4 of these elements.
    • In the example above, the <div> element contains the <h2> and <p> elements. Therefore, the <div> element is an ancestor of the <h2> and <p> elements. Since the <div> element directly contains the <h2> and <p> elements, the <div> element is also the parent of the <h2> and <p> elements.
  • Descendant Element - An element that is contained (at any level) within another element is a descendant of the element that contains it.
    • In the example above, the <h1>, <div>, <h2> and <p> elements are all contained (at some level) within the <body> element. Therefore, all 4 of these elements are descendant elements of the <body> element.
    • In the example above, the <h2> and <p> elements are contained within the <div> element. Therefore, the <h2> and <p> elements are both descendant elements of the <div> element. Since the <h2> and <p> elements are directly contained within the <div> element, the <h2> and <p> element are also child elements of the <div> element.