The element path at the bottom of a web page shows the hierarchy of HTML elements for the currently selected element in the web page. Selected elements may include text, heading, list item, table, cell, line, image, and so on. The element path shows the order of elements that affect the appearance of the selection. The element path is useful for identifying why your style may not be producing the intended results. It is especially helpful for analyzing the formatting of complex elements such as tables, where there are multiple elements that can be individually formatted, and you are not sure which ones affect the format of a specific table element.
To understand the controlling elements for a selection, click anywhere in the formatted text or object and view the hierarchy of element identifiers in the element path. Element identifiers appear in the path from left to right in the order of inheritance, starting with the Document Body style that initially controls the formatting.
Note: Defaults inherited from the browser do not appear in the element path.
Element identifiers also appear for direct formatting applied to a selection. Direct formatting may be represented by specific identifiers, such as Bold and Italics, while other direct formatting, such as text color, may be represented by the generic "Text" identifier.
Pointing and clicking identifiers in the element path have different functions. When you point to an element identifier, a tooltip displays the element name, the HTML element tag (such as <body>, <p>, <a>) and a style name if a style is applied to the selection. In addition, the tooltip may also display the name of the default style that affects the applied style through inheritance.
Clicking an identifier selects the element in the web page and displays the style information for that element in the Style Inspector. Use the Style Inspector in conjunction with the element path to understand the formatting affecting the elements in your web page. As you select elements in the element path, the Style Inspector changes to display the attributes for the browser defaults, Document Body style, default style, applied style, and direct formatting controlling the appearance of the selection. See Use the Style Inspector in this chapter for more information.
Consider the following example. You have a 4x4 (row/column) table with row and column headers. A body cell has a paragraph of text to which you have applied bolding to two consecutive words. When you click in one of the bolded words, the element path displays the following:
Document Body ---> Table ---> Table Body ---> Row ---> Cell ---> Bold
Clicking each element identifier in the element path selects the following: (Note that only cells with content are selected when you click a table element.)