How to Find CSS Selectors on WordPress Sites

At some point working with WordPress, you’ll need to dabble with CSS. A plugin may ask you to provide a CSS selector/class to work, or you may want to customize part of your site with CSS.

This post is for anyone who needs to find a CSS selector on their site.

If you’re completely unsure what CSS is and what it’s used for, check out our CSS with WordPress overview first.

How to Find CSS Selectors

You only need one tool and you already have it: a browser!

Every browser has a set of developer tools that can be used to examine a website. I’ll be using Chrome, but you can use any modern browser you’d like. They all have an extremely similar set of tools.

View your site’s HTML

First, open your homepage in a new tab.

Right-click anywhere on the page, and select the “View Source” option. This will open a page that looks like this in a new tab:

This is the raw HTML of the web page. This is what Google, your browser, and any other software will see when it visits your site. It’s the code your browser renders into a website you can interact with.

It’s important to understand that every page on your site is made from HTML like this.

While it’s cool to see the code behind the website, there’s a better and more useful way for us to view it.

Get a better view of the HTML

Return to your homepage, right-click any part of the page, and this time select the “Inspect” option (it might say “Inspect Element”). This will open your browser’s developer tools presenting a window like this:

This is another way to view the same HTML you just saw when viewing the source code. The difference is that we now have a hierarchy we can navigate and interact with.

If all this looks strange and overwhelming that’s okay. The goal here isn’t to master your browser’s developer tools, it’s to find one CSS selector on the site.

Navigate the HTML

In your developer tools, there is a left-side and a right-side. The left-side has a hierarchy of the HTML we can navigate. You can ignore the right-side entirely.

Now, if you hover your mouse over the HTML elements in the developer tools, you’ll notice something really cool. Every element gets highlighted on the page as you hover over it.

This makes it easy to get to the element you want. In fact, you don’t really need to understand the HTML in order to find the element you’re looking for.

There are two ways to quickly get straight to the element you need to target.

Method 1: Navigate using the arrows

Let’s say I need to get to a link in my pagination. I can right-click somewhere on the page, then use the drop-down arrows to make my way to the link.

Every time I click an arrow, it reveals the elements contained within that element. This is often required, but the next method can be even easier and faster.

Method 2: Right-click the element

Sometimes you can select the exact element you want. To do this, right-click on the element and the developer tools will open up already highlighting that element.

Here’s how to navigate to the same pagination link with this faster method.

Get the CSS selector

Once you’ve located the HTML element you’re looking for, the last step is to copy the CSS selector.

In the screenshot below, you can see I’m hovering over the page two link.

The link element has a class called “page-numbers”, and a class can be used as a CSS selector. If you needed to target the links in the pagination, you could use the class “page-numbers” because each of the links has that class.

Tip: When writing CSS, you target classes with a period in front of the name, like “.page-numbers”. When providing a class for a plugin, you may or may not need to include the period.

Easily Find CSS Selectors

With the steps above, you can find a CSS class on any element on your site. This will come in handy when customizing your site and is required to get certain plugins to work.

If you have any questions about this tutorial, please post in the comments below.