DOM Visualizer
Nested HTML is easy to write and hard to see. If a selector “should work” and doesn’t, the tree is the problem, not CSS.
Nested HTML is easy to write and hard to see. If a selector “should work” and doesn’t, the tree is the problem, not CSS.
Paste the markup. Expand nodes. Search by tag, #id, or .class. Copy the path when you find the element you thought was a direct child.
How to use it
- Paste what the browser actually rendered, including wrappers your framework injects.
- Copy the CSS path off a node (
body > div.container > header > h1). That's the selector to debug. - Count depth. More than about 5–7 levels is usually extra divs Grid or Flex would replace.
- Email HTML is tables inside tables. The tree is how you find which
tdactually wraps the button.
When it breaks
- The selector fails because of a wrapper you didn't paste. Visualize the rendered DOM, not the source snippet.
- Search only sees the paste. Shadow DOM and iframes won't show up here.
- Deep trees aren't invalid. They're why
div > div > div > spanis fragile.
HTML Input
Loading editor...
Paste HTML above to visualize the DOM tree
<tag> #id .classFeatures
- Paste markup and expand nodes in the tree
- Search by tag, `#id`, or `.class`
- Copy the CSS path off a node (`body > div.container > header > h1`)
- Count depth: more than about 5–7 levels is usually extra divs
- Find which `td` actually wraps the button in email HTML
Common Use Cases
- A selector "should work" and doesn't: the tree is the problem, not CSS
- Paste what the browser actually rendered, including framework wrappers
- Count nested divs Grid or Flex would replace
- Email HTML is tables inside tables; find the wrapping `td`
The tree is the problem, not CSS
Nested HTML is easy to write and hard to see. If a selector "should work" and doesn't, the tree is the problem, not CSS.
Paste the markup. Expand nodes. Search by tag, #id, or .class. Copy the path when you find the element you thought was a direct child.
Paste what the browser actually rendered, including wrappers your framework injects. Copy the CSS path off a node (body > div.container > header > h1). That's the selector to debug. Count depth. More than about 5–7 levels is usually extra divs Grid or Flex would replace. Email HTML is tables inside tables. The tree is how you find which td actually wraps the button.
The selector fails because of a wrapper you didn't paste. Visualize the rendered DOM, not the source snippet. Search only sees the paste. Shadow DOM and iframes won't show up here. Deep trees aren't invalid. They're why div > div > div > span is fragile.
Examples
<div><header><h1>Title</h1></header><main><p>Content</p></main></div><nav><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li></ul></nav><article><header><h2>Post</h2></header><section><p>Paragraph</p></section><footer>Footer</footer></article>Frequently Asked Questions
The selector fails because of a wrapper you didn't paste. Visualize the rendered DOM, not the source snippet. Paste what the browser actually rendered, including wrappers your framework injects.
Copy the CSS path off a node (body > div.container > header > h1). That's the selector to debug. Copy the path when you find the element you thought was a direct child.
Count depth. More than about 5–7 levels is usually extra divs Grid or Flex would replace. Deep trees aren't invalid. They're why div > div > div > span is fragile.
Search only sees the paste. Shadow DOM and iframes won't show up here. Search by tag, #id, or .class.
Email HTML is tables inside tables. The tree is how you find which td actually wraps the button.