Getting CSS Selectors

Overview

This guide assumes you have basic knowledge of CSS and CSS selectors.

CSS selectors are HTML element attributes. Examples include: 

• class,
• id, and 
• href (this targets a URL in a link). 

Selectors are targeted for styling in a theme or plugin stylesheet. Popup Maker targets selectors to call and trigger popups. 

Selectors can be targeted to trigger popups from anywhere within a web page. They are particularly useful for targeting the following areas outside a post or page editor:

• header; 
• navigation menu, 
• widget / sidebar; or
• footer.

A selector used repeatedly throughout a site can be targeted to display the same popup from multiple locations using either a  Click Open or Scroll trigger. 

CSS selectors can be identified from the front end of a site using the Popup Maker Admin Toolbar, or browser inspection tools. This article describes the application of both methods.

Article Contents

• Popup Maker 'Get Selector' Tool
• Use Browser Inspection Tools to Get the CSS Selector
• Update Trigger Settings and Popup to Save Changes

Popup Maker 'Get Selector' Tool

The Popup Maker Admin Toolbar includes a  'Get Selector' feature that allows users to identify any CSS selector on a site.  It bypasses browser inspection tools, and the effort required to carefully inspect HTML markup.

The Toolbar is available on the front end to logged in Admin users. In the toolbar, select 'Popup Maker' >> 'Tools' >> 'Get Selector' to activate the feature. See the related video below to watch how the 'Get Selector' feature is applied.

Related video:  'Get Selector' Feature in Action

[ Back to top ]

Use Browser Inspection Tools to Get the CSS Selector 

CSS Selectors can also be found using browser inspection tools. These tools require a willingness to inspect and locate the target HTML from among a lot of other data. For those new or unaccustomed to the task, the experience may be challenging. That's why we developed the 'Get Selector' tool. 

As an example, let’s say you intend to display a popup when someone clicks the ‘Get Our Newsletter’ navigation menu as shown below.  Assume that the site theme does not provide a way to easily add a Popup Maker class (or any additional custom class) to the targeted menu item. 

Use the browser inspection tools to inspect and identify the nav menu CSS selector(s) to be targeted. 

1. Use a cursor to highlight the content to be inspected.  
2. With a mouse or trackpad, select right click. 
3. From the option menu, select 'Inspect'.

Note: Browser inspection tools can also be opened using the keyboard. See the following related article:   How to Open Browser Inspection Tools on Your Site.

The inspector will open an 'Elements' box, and highlight the HTML selected in the browser.

Use the mouse or trackpad again, and right click to display a second option menu. Select 'Copy' >> 'Copy Selector' to copy the CSS selector. 

[ Back to top ]

Update Trigger Settings and Popup to Save Changes

Once a CSS selector is identified for targeting, it must be entered into the Extra CSS Selectors field of either a Click Open or Scroll trigger.  A Click Open trigger is included at no charge within the free version of Popup Maker. The Scroll trigger requires the purchase of a plugin extension license. 

To target a CSS selector in the Click Open trigger, open the WordPress admin, and go to: 

'Popup Maker' >> 'All Popups' >> {name-of-popup} >> Edit

In the Popup Editor, go to the Popup Settings box, select the 'Triggers' option tab, and edit the Click Open trigger.  Enter or paste a copy of the targeted selector in the Extra CSS Selector field inside the settings box. 

Update the trigger and then update the popup to save all changes. Visit the front end, and use the Popup Maker Admin Toolbar to test and confirm that the trigger works as intended. 

Related article: The Popup Admin Toolbar

[ Back to top ]