Skip to content

Understanding Element Relationships

In the context of website development, element relationships typically refer to the way elements are structured on the page and how they interact with each other. In general, HTML documents have their HTML elements nested inside other elements, creating parent-child relationships.

Nesting and Descendants

Nesting involves placing one element inside the other, often like building blocks (any components, widgets, or elements) within a container. With Nesting, you can group related elements and it becomes easier to manage and control their layout.

Nesting divides elements into:

  1. Parent Elements: Contain one or more other elements. In WebbsAI, this often refers to a div block, container, section, and similar others.
  2. Child Elements: Reside inside a parent element and sit lower in the hierarchy. Both a heading and a text inside a container are child elements.

Visualising Nesting with WebbsAI

The Layers panel in WebbsAI provides a clear view of nested elements. The ‘App’ section serves as the main parent, housing all other webpage functionalities as child elements.

For any Landing Page, the nesting might look something like this:

Layers Panel Overview

Notice how a child element is slightly indented to the right. This helps us visualize the whole tree of our site more easily.

Style Inheritance

In a parent-child relationship, certain styles applied to the parent element are inherited by its descendants. This is useful because it reduces the need to explicitly define styles for every individual element on your page.

  • Inherited properties: Font, text, list, and table properties are commonly inherited by the child. For example, setting a font family on your container can be inherited by a heading placed inside.

  • Non-inherited properties: Certain properties like layouts (width and height) typically don’t inherit.

To know which child elements are inheriting certain properties, look for the text color on some of the properties on your Styles panel. If they’re red, it means they’ve inherited that property from a parent element. You can control this inheritance by being explicit with your styles on your child elements.

Examples of Relationships and Nesting

The Box Model represents the relationships between the content, padding, border, and margin of an element. Each layer is nested within the other.

When using Breakpoints, styles applied to the primary breakpoint or a larger breakpoint can cascade down to the other breakpoints. If a Grid is structured in two columns on your Laptop, your Tablet and Mobile view will have the same arrangement, unless overridden.

Complex examples of nesting can be seen in Grid and Flexbox. There is one main container or block (the parent element) that holds and arranges all its grid items or flex items (the child elements).