Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript One Solution

parent of child

how we can recognise when it's a parent from a child. Is it in this case when the HTML tag inside <body> structure is in one line that means it's a sibling and when it's a little bit to the left it's a parent of the tag which is a little bit left not right underneath of the tag?

last two examples:

const wrapper = list.parentNode;
const body = wrapper.parentNode;

I assume that ul with the class="list" is a child of div with the class="wrapper" that would make sense if the sentence I explained above is true.

If not what about tags <div></div> and <h1>Color Palette:</h1> above.

Appreciate your answer

Hannah Cherba
Hannah Cherba
4,210 Points

First of all, classes can be added to anything in the HTML. They are something you add to differentiate between different elements in a file. Take the below code; indentation helps us to see the parent/child relationship. Hopefully this answers your question.

<!DOCTYPE html>
<html>
    <head>
        <title>My profile</title> //the parent of title would be the 'head'
    </head>
    <body> //within this body element there are the children: div, h1, h2, ul, and li
      <div></div> //h1, h2, and ul are children of this div
          <h1 class="title">Resume Page</h1>
          <h2>Summary</h2>
          <ul class="summary-list"> //the 'ul' is the parent element to the 'li'
              <li>Experience in JavaScript, HTML, and CSS</li>
              <li>An AA degree in Interdisciplinary Studies, 
                with a focus in the arts and humanities</li>
              <li>Five years of experience running a medical office</li>

        </ul>
    </body>
</html>

2 Answers

Steven Parker
Steven Parker
221,322 Points

For HTML tags, a "parent" tag is one that encloses one or more other tags, and a "child" is a tag that is inside another tag. Based on this, the ul with the class "list" is indeed a child of the div with the class "wrapper". But the li is not the grandchild of the h1 since it is not inside the h1. The h1 in this example is not a parent of any elements. But the body is an ancestor (at some level) to all the visible elements.

Using indentation to show relationship is a recommended "best practice" but it is not required for proper operation and should not be relied on when working with code written by others. But as Guil's HTML code does use this convention, the the relationship is also reflected by the indentation; but only for those tags that are contained by or enclose other tags.

Hannah Cherba
Hannah Cherba
4,210 Points

So Steven, is the body element the great-grandparent of the Li and the parent of the div? is that how it would work?

Steven Parker
Steven Parker
221,322 Points

Hannah, in the video example (not the one you posted here), yes. The body element is the great-grandparent of the li and the parent of the div (with class "wrapper"). It is also the grandparent of the h1 and the ul.

Alright I think I got it. Lets make sure.

So li is children of ul, grandchildren of H1 and grand grandchildren of body