---
title: "Can Whatfix capture the CSS selector of an element?"
slug: "how-to-find-the-css-selector-of-an-element-using-whatfix-editor"
updated: 2026-08-10T15:43:00Z
published: 2026-08-10T15:43:00Z
canonical: "support.whatfix.com/how-to-find-the-css-selector-of-an-element-using-whatfix-editor"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.whatfix.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Can Whatfix capture the CSS selector of an element?

Yes, Whatfix captures the CSS selector of an element using Whatfix Studio in two scenarios:

- While adding a Branching rule to a Flow step.
- While adding a Display Rule to content.

Use the following steps to capture the CSS Selector using Whatfix Studio:

**Capture CSS Selector while Branching**

1. Launch the Whatfix Studio, create a Flow, and then click the **branching** icon. ![clm_branching icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching%20icon.png)

> [!NOTE]
> Info
> 
> For more information, see [Add a branch to a Flow](/studio/docs/adding-a-branch-to-a-flow)

1. Click **Create Branch**. ![clm_branching revamp_create branch](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching%20revamp_create%20branch.png)
2. Under **Branching conditions**, click **Add Rule**. ![clm_branching_add rule1](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_add%20rule%281%29.png)
3. Select **Action Element Is** rule using the dropdown. ![clm_branching_action element is](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_action%20element%20is.png)
4. Select the **Select Element** option from the dropdown instead of **CSS Selector**. ![clm_branching_select element](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_select%20element.png)
5. Click **Select**. ![clm_branching_select button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_select%20button.png)
6. Click the element for which you want to find a CSS Selector in the application's UI.

![Selecting an element in the application UI so Whatfix captures its CSS Selector for a Branching rule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20selector.gif)

---

> [!WARNING]
> Note
> 
> - Whatfix captures the CSS Selector of the element automatically.
> - To verify the selected element click the **View** icon. ![clm_branching_view icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_branching_view%20icon.png)

**Capture CSS Selector while configuring Display Rules**

1. Launch Whatfix Studio, create the content, and then go to the **ADVANCED OPTIONS** section. ![clm_css_advanced options](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_advanced%20options.png)
2. Expand the **Display Rules** dropdown, and then click **Add Rule**. ![clm_css_add rule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_add%20rule.png)
3. Select the **Other Element on Page** option from the dropdown. ![clm_css_other elements on page](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_other%20elements%20on%20page.png)
4. Select the **Select Element** option in the dropdown instead of **CSS Selector**. ![clm_css_select element](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_select%20element.png)

> [!NOTE]
> Info
> 
> For more information, see [Other Element Is condition as a Visibility Rule](/studio/docs/other-element-is-condition-rule).

1. Click **Select**. ![clm_css_select button](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_select%20button.png)
2. Click the element for which you wish to find a CSS Selector in the application's UI.

![Selecting an element in the application UI so Whatfix captures its CSS Selector for a Display Rule](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/CSS%20selector%20display%20rules.gif)

---

> [!WARNING]
> Note
> 
> - Whatfix captures the CSS Selector of the element automatically.
> - To verify the selected element, click the **View** icon. ![clm_css_view icon](https://cdn.document360.io/a268766e-d74d-4619-9613-e2472f809ffb/Images/Documentation/clm_css_view%20icon.png)

## Related

- [Visibility and Display Rule Conditions](/visibility-and-display-rule-conditions-1.md)
- [Branching in a Flow](/branching-in-a-flow.md)
- [Identify an element's CSS selector](/identify-an-elements-css-selector.md)