Technique or tool to get CSS element list for deeply nested elements quickly

Question

I am using Chrome dev tools and am working on a code base I did not create.

There are deeply nested elements that I need to reach all over the place. In order to select them with CSS I feel like I'm manually following the list of HTML elements with my eyes ( which is taking me forever).

There should just be a tool that allows me to select the top element and the (deeply) nested element I want - then give me the hierarchy in a CSS formatted block so I can go to work.

I am curious if such a tool exists or if there is an equivalent (possibly in Chrome dev tools somewhere? ).

Thank you.

Answer 1

I'm a little unclear on the question (so I probably shouldn't be answering it!) but if you are asking for a way to quickly get a CSS selector for deeply nested elements you might try Firebug.

1. Inspect the element
2. Right click in the style panel to the right on the HTML panel
3. Select 'Add Rule'.

Does a very good job of sorting out the required specificity.

As @TaoistWA pointed out in the comments, "Copy CSS Path" is another option.

1. Inspect the element
2. Right click on the element in the HTML panel
3. Select 'Copy CSS Path'.

You can, of course, combine them both within the style panel to test your changes on the fly.