> For the complete documentation index, see [llms.txt](https://docs.trysavvy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-use-custom-selectors.md).

# Work in Progress: How to Use Custom Selectors

{% hint style="info" %}
You will find most of what you need as an option to select in the Design Tab. But for some very specific cases, you'll need to find the class of the component you want to style and add it as a Custom Selector.
{% endhint %}

### Step 1: Enable Custom Selectors

* Select the Entire Flow by going to the Layers Tab on the left Sidebar, then to the "All" Tab, and finally clicking on "Entire Flow"
* On the Options Tab on the Right Sidebar, check the "Enable Custom Selectors" box

### Step 2: Add the Selector

* Turn on the "Show Custom Selectors" Toggle. You'll find it in the Design Tab of the Right Sidebar. For it to show, you need to select for example "whole thing" of a component (anything selected will do, but it won't show if no component is selected)
* Type or paste the selector in the input field and press Enter.&#x20;

{% hint style="info" %}
If the selector is the class of an HTML tag (for example `big-button`), remember to add a dot in front of it (`.big-button`). If it's just a specific tag (like `ul` or `li`) you don't need the dot, but it will apply to the whole flow.
{% endhint %}

### Step 3: Add the Styles

* After creating the custom selector, try setting some very obvious styles, to confirm that's the selector you need.&#x20;
* If you delete all styles on that selector, it will disappear and you'll have to create it again.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.trysavvy.com/other-useful-docs/work-in-progress/pending/work-in-progress-how-to-use-custom-selectors.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
