Getting CSS Selectors

How To Get CSS Selectors #

This guide explains how to get CSS selectors from your web page so you can add them to your Click Open triggers.

You can use Popup Maker’s built-in Get Selector tool or the browser’s Developer Tools to get CSS selectors from your post or page.

Popup Maker’s Get Selector Tool #

The video below shows you step-by-step how to use Popup Maker’s built-in Get Selector tool.

Here’s a summary of what the video covers.

1. Visit the post or page while logged in to your WordPress site.
2. Hover over the Popup Maker admin bar.
3. Click Get Selector under the Tools submenu.
4. Click OK in the alert window.
5. Click on the image (or any element you want).
6. Copy the selector.
7. Paste the selector into the Extra CSS Selectors setting in your popup.

Browser Developer Tools  #

You can also use the Developer Tools that most modern browsers have (such as Chrome). But be careful. These tools can give you an “extra” long selector that can be tricky to copy and paste.

Here’s a short demo using Chrome’s Developer Tools.

Here’s a summary of the demo.

1. Right-click on the About us button.
2. Click Inspect.
3. Right-click on the page element highlighted in HTML source.
4. Click Copy > Copy selector.