CSS Selector Masking

CSS Selectors allow you to target specific UI elements on a page regardless of their content. This is the most performant way to mask static dashboards.

Finding a Selector

While you can use the right-click menu, power users can define robust selectors manually using the Chrome DevTools (F12).

1. Inspect the element you want to hide (Right Click → Inspect).
2. Look for a stable ID or Class name (e.g., id="account-balance" or class="user-email").
3. Test your selector in the Console: document.querySelectorAll('.user-email').

Selector Strategies

By ID (Best)

IDs are usually unique to one element.

#total-revenue-card

By Class

Classes might appear multiple times. This will mask all elements with this class.

.private-message-body

By Attribute (Advanced)

Great for modern React apps with dynamic classes (like css-1r9872). Look for data attributes instead.

[data-testid="customer-social-security"]

Scoped Selectors

Only mask the email address if it appears inside the sidebar.

.sidebar .user-email