(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.