CSS Elements Hierarchy – Concept of Selective Styling

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

The focus of this tutorial is to clarify the concept of element family tree instead of styling them. Incoming tutorials of CSS3 Guide will cover the styling and other advanced concepts.

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,

CSS Elements Hierarchy

Sample Code

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

4. Descendants

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>

5. Siblings

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.