All videos

Element Hierarchy

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

Element Hierarchy

To succeed in web design, and with Webflow, it's vital that you understand how element hierarchy affects styling and sizing. In this video, we’ll cover element hierarchy in three ways:

  1. How objects nest inside one another (e.g., parents, children, siblings)
  2. How text styling is passed down from parent to child
  3. How the sizes of parent elements and child elements affect one another

Video details

Duration

3:57

Topic

Fundamentals

Continue watching

Element Hierarchy - 图1<h3>Migrate a site to Webflow</h3>1:16:53

Element Hierarchy - 图2<h3>Cursor follow interactions</h3>10:25

Element Hierarchy - 图3<h3>Build a cursor-following 3D button</h3>5:15

Element Hierarchy - 图4<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

Element Hierarchy - 图5<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Element Hierarchy",
  "description": "To succeed in web design, and with Webflow, it&#39;s vital that you understand how elements hierarchy affects styling and sizing. In this video, we’ll cover element hierarchy in three ways:",
  "url": "https://university.webflow.com/videos/element-hierarchy",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b945ef11883cefbe7b5840_maxresdefault.webp",
  "duration": "3:57",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=SffN3U1qOl0",
  "embedUrl": "https://www.youtube.com/embed/SffN3U1qOl0",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}