WPCode Logo

WPCode Documentation

Documentation, Reference Materials, and Tutorials for WPCode

Most Popular

Get free tips and resources right in your inbox, along with 500+ others

Follow Us

How to find the right CSS Selector

If you are using the Insert Anywhere feature of WPCode or the Conversion Pixels addon Click Tracking feature you will need to indicate the correct CSS Selector of the element that you want to target.

If you’re using a modern browser, the easiest way to accomplish that is by using the browser’s developer tools. Don’t worry about the name, you don’t need to be a developer to use them.

To get started, just right-click on the element you want to target and choose “Inspect Element.” (In case you’re using Safari and can’t find that option, you might need to enable Developer Tools first.)

After selecting “Inspect Element,” a new panel or window will pop up, showing the Developer tools, and the element you clicked on will be highlighted in the HTML structure, something like this:

By the way, if you hover over the element, it will also be highlighted on the actual page, making it easier to ensure you’ve selected the correct one.

Now, here comes the fun part. Simply right-click on the highlighted element within the developer tools and go to “Copy > Copy Selector”:

This will copy something like #wp–skip-link–target > h1 to your clipboard.

All you have to do next is paste it into the WPCode CSS Selector field for the feature that you want to use and save your settings.

Still stuck? How can we help?

Last Updated on

Get Started Today & Add Your Own Snippets

Future-proof your website with WPCode Snippets and improve the way you manage code across all your websites.