Parent and Child Elements

Parent and Child elements are most common in HTML coding. Parent and Child elements are just as they sound. The Parent is more dominate and controls the Child elements by default. Parent or child elements can be both a ID or Class within any snippet of coding.

Something to remember when thinking about Parent and Child elements is everyone has a Parent. In other words, a Parent element can also be a child element to a different element at the same time.

This snippet of coding is just something I wrote up free hand, so it does not have any relation to your template or blog.

<div class='Priority Parent'>
<div id='Priority Child 1'>
<div class='Sub Child 1-1'>
</div>
</div>
<div id='Priority Child 2'>
<div class='Sub Child 2-1'>
<div class='Low Sub Child 2-1-1'>
</div>
</div>
<div class='Sub Child 2-2'>
</div>
</div>
</div>

I apologias ahead of time because this may get a little confusing. Instead of me breaking this down into many lessons, I decided to try and cover this in one post.

The Priority Parent has control over everything in this segment of coding. If this was a family then you could look at this element as a great grandparent. The Priority Child's (Orange & Green) are the Priority Parents kids.

As you can see the Priority Child 1 has a kid of its own which is the Sub Child 1-1.

Now we come to the 2nd child or the Priority Parent called the Priority Child 2. This also has kids of its own called the the Sub Child 2-1 and Sub Child 2-2. The Sub Child 2-1 has a kid also which is Low Sub Child 2-1-1.

Maybe I lost some of you on this so I will try to explain it in another manner.

So instead of thinking of these as Parents and Children, lets look at this as a chain of command of a company.

President

Manager of Department 1

Secretary of Manager in Department 1

Manager of Department 2

1st Secretary of Manager  in Department 2

Assistant Secretary of Manager in Department 2

2nd Secretary of Manager in Department 2

The President has control over everyone and everything while the mangers only have control over their departments. Manager of Department 2 has a bigger department then Manager 1, so he is issued a 2nd Secretary which is equal in control to 1st Secretary. (Either one can control the other) The 1st Secretary also has a Assistant which only the 1st Secretary, Manager 2 and President can order around.


The ending div tags are what ends ones control over another. This may take some time to fully understand where one div tag stops and another ends, but with some practice you can learn. A good program to practice this on is Notepad++.  If you paste the code I have above in Notepad++ you will see minus symbols to the left which can be used to close and expand the elements.  If you close a element and other elements disappear below it then, that element is a parent to the closing elements.  This will show you which elements have control over one another.

In this next lesson I will teach you how to properly style Parent and Child elements.

Next Lesson-->