johnny johnny - 1 year ago 34
CSS Question

Are there any browser development tools that show you what level of the DOM an element is, so I know how to select it with CSS?

For example, If I look at an HTML tag in the Developer Tools of Chrome, FF, etc., is there a way for me to see where in the DOM an item is located with the level that I could use for a CSS selector?

If I go to a tag, it might have parent tr nth-child(4)...

I looked Chrome's Properties. Is that what I am seeking?

Answer Source

You might not see it initially, but if you click on the Node in Chrome Developer Tools "Elements"-Panel and select Copy -> Copy XPath, you will have the Path copied containing the index of the element like this:


=> 2nd item