Element hierarchy

As a designer, you can use element hierarchy to organize content and create intuitive and engaging user experiences on your site. Here we’ll cover element hierarchy in three ways:

• Nesting — how elements fit inside one another (e.g., parents, children, siblings)
• Inherited text styling — how text styling is passed down from parent to child
• Size relationships — how the size of parent and child elements affect one another

Nesting

Nesting refers to the way elements fit inside one another. For example, if you add a heading element inside a section element, the heading is nested inside the section.

We use terms like parent, children, siblings, and grandchildren to describe the relationships between elements:

• Parent — an element that contains other elements. For instance, a section containing a heading and a paragraph is the parent of the heading and paragraph elements.
• Children — elements nested within another element. In the previous example, the heading and paragraph are children of the section.
• Siblings — elements that share the same parent. In the  previous example, the heading and paragraph are siblings because they're both children of the section.
• Grandchildren — elements nested within a child element, making them grandchildren of the original parent. For example, if a div is nested within a section, and a paragraph is nested within that div, the paragraph is a grandchild of the section.

Nested elements are grouped within their parent element. If you move the parent element, all its child elements move along with it. This hierarchical structure organizes and controls element behavior and is an important part of the box model.

View nested elements in the Navigator

The Navigator displays a hierarchical tree of all elements on a page. The top-level parent element is always the Body element, which is automatically added to each page in your Webflow site and cannot be moved or deleted.

When an element is nested inside another element, its name is indented to the right to indicate that it’s a child of the parent element. Sibling elements share the same amount of indentation.

You can expand or collapse parent elements in the Navigator to show or hide their child elements. You can also click the “collapse all” icon to see only the top-level parent elements, or click the “expand all” icon to see every element on the page.

View nested elements in the navigation breadcrumb bar

With an element selected, you can view the hierarchy of nested elements in the breadcrumb bar under the canvas. The breadcrumb bar displays elements in descending hierarchical order from left to right, with the selected element on the right, and the top-level parent element on the left.

Note: The breadcrumb bar doesn’t show children or siblings of the selected element — only its direct parent, that element’s direct parent, and so on.

Inherited text styling

When an element has typography styles, those styles are passed down to its child and grandchild elements. For example, if you edit the font family on the Body element, all of its child elements inherit the same font family.  

You can override styles inherited from parent and grandparent elements. For example, if you select a section and edit the font family, all of its children inherit the same font family. However, if you then select a child element and edit the font family, it overrides the font family inherited from the parent section. Learn more about text style inheritance.

The Style panel helps you determine which styles are being inherited, and from where. Orange labels or icons indicate that a style is being inherited from a parent element, higher class, or HTML tag.

Size relationships

The height of an element is usually determined by the height of the content inside of it (i.e., its child elements) unless a defined height is set. For example, sections have no defined height by default. But if an element with an inherent or defined height is nested inside a section, the section will grow or shrink to be as tall as that child element.

While children can affect the size of their parent elements, you can override this by defining a height on the parent element — then, the content nested inside no longer affects the size of the parent.

If the height of a child element exceeds the defined height of its parent, the content will overflow. You can use the overflow property to hide or display overflowing content.