# Inspecting invisible, overlapping, and parent elements

Sometimes, you can't select an element only using your mouse. Maybe they're invisible, or perhaps they're hidden deeply inside the HTML.

There are 2 ways to select these complex elements with CSS Pro:

### 1. Using your keyboard arrow keys (▲ up and ▼ down)

To inspect the upper and lower elements on the DOM without moving your mouse, press the arrow keys (▲ up and ▼ down):

![](/files/QY4pEwsI5ctNT28Cs1JH)

{% hint style="info" %}
PS: The page needs to be focused for shortcuts to work - such as the arrow keys. If the page is not focused, you must click somewhere first. Or always open the extension via the shortcut. That way, the page starts focused.
{% endhint %}

### 2. Via the menu's HTML Navigator feature

You can also click on the menu's option **HTML Navigator** to visualize the website's HTML structure and all its elements.

<figure><img src="/files/ug4EAsKQO5hy4ZSm2TFN" alt=""><figcaption><p>Visualize all the elements of a website in real-time and understand the website's structure. Click to select elements and edit.</p></figcaption></figure>

Navigate the elements tree using your mouse or, even faster, use your keyboard's arrow keys ▲ up and ▼ down to navigate between elements and ► right and ◄ left to expand and collapse elements.

You can also click "Pick an element" to pick elements using your mouse. When this mode is active, as you move the mouse throughout the screen, elements will be focused/highlighted so that you can understand where they are located in the website's structure.

{% embed url="<https://youtu.be/yg0u_TA-EmQ?si=cVoMN3KFo1eX7vV-&t=9>" %}
A video showing how the HTML Elements feature work.
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.csspro.com/inspecting/inspecting-overlapping-parent-and-sibling-elements.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.