It’s not enough to style a Web page element. The art of CSS and thus the art of Web design, is the ability to style elements based on their context. You must consider where an element is in the document, which elements surround it, its attributes, content, and dynamic state and even the platform displaying the element (screen, handheld device, TV, and so on).
CSS Elements Hierarchy – A Concept of Element Family Tree
The level of styling can get increasingly complex, so it is very important to understand the CSS elements hierarchy. I am going to share the basic (but very important) concepts of CSS elements family tree. I hope you will enjoy,
<div> <p> <em>TutorialChip</em> <strong>Web Development and Designing Tutorials</strong> </p> </div>
1. Nested Tags
When a tag is surrounded by another tag (one inside another) – the tags are known as nested tags. Our Sample Code is an example of “Nested Tags”.
I am going to explain CSS elements hierarchy by keeping in mind nested set.
2. Parent Element
In the concept of nested set, “Outer element is called the Parent”. Parent elements contain other elements (children). According to our Sample Code,
- <div> is the Parent of <p> tag.
- <p> is the Parent of <em> and <strong> tags.
3. Child Element
In the nested set, “Inner element is called the Child”. Child elements will often inherit styles from a parent element. Let’s take a look into Sample Code,
- <p> is the child of <div> tag.
- <em> and <strong> are child of <p> tag.
Child elements are first generation descendant elements in relation to the parent. Second generation and higher elements are sometimes referred to as grandchildren.
The “Child Tag” and “Any Children of that Child Tag” are the Parent’s descendants. The concept can also be “Descendant elements are any elements within another element”. Will you guess to find descendants in our Sample Code,
- <p> and <p> child’s are the descendants of <div>
Tags that have the same parent are called Siblings.
- <em> and <strong> tags are Siblings.
6. Adjacent Siblings
Tags immediately next to each other are known as Adjacent Siblings.
- <em> is the “Preceding Sibling”.
- <strong> is the “Adjacent Sibling”.
I hope you have enjoyed the tutorial. Don’t forget to subscribe your email to update your knowledge with me.