If you opened the Inspector by clicking "Inspect Element", then an element will already be selected.
Otherwise, as you move your mouse around the page, the element under your mouse is highlighted and an annotation displays its HTML tag, any class or ID attributes, and the element's size. At the same time, its HTML definition is displayed, in context, in the Inspector's left-hand pane:
From Firefox 39 onwards, you can use the arrow keys here to change the currently highlighted element:
- Left: highlight the current element's parent
- Right: highlight the current element's first child, or its next sibling if it has no children, or the next node in the tree if it has no siblings
This is especially useful when an element and its parent occupy the same space on the screen, making it difficult to select one of them using only the mouse.
Clicking on the highlighted element selects it. Once an element is selected its markup is highlighted in the HTML pane on the left of the Inspector, and the CSS pane on the right of the Inspector shows its style information:
There are two ways to select a new element: either click on its markup in the HTML pane, or click the "Select element" button, then click on the element in the web page.