How to Find the Correct CSS Selector in a Pre-Existing Website Design

I am often asked to help people customise an existing website layout or design, where the element they want to edit is not included in the standard Appearance > Customise screens (assuming they’re using WordPress).

In this situation there’s no option but to add the styling manually through the Additional CSS tab, which you’ll find at the bottom of the Appearance > Customise screen.

Note that different themes sometimes assign the name Custom CSS to that tab.

Struggling to grow your business? Then this is for you: get 4 top business growth tips, every Monday!

One of the biggest frustrations you’ll have in editing a pre-existing design, though, is finding the correct CSS selector.

Since there is no agreed naming convention for CSS selectors (which would not be possible, anyway, since any designer can add any element they want and name it whatever they want) finding the correct selector used to be like looking for a needle in a haystack.

Thankfully, all modern browsers have solved this problem by including an ‘Inspect’ tool (or ‘Inspect element’ in Firefox) which makes the task of finding the correct selector a doddle.

The video below shows the process, but here’s a step-by-step summary (you can also check the picture at the top):

  1. Right click on the element you want to edit and select ‘Inspect’ (or ‘Inspect element’)
  2. When the ‘Inspect’ panel comes up look for the element in the styles window (pane)
  3. Look for the selector you want to edit and, when you’ve found it, change the value (this will confirm that you are editing the correct element)
  4. Copy the selector
  5. Paste the selector you copied into your Additional CSS tab and add the declaration and value you want
  6. Click ‘Publish’ and you’re done

This video shows the process:

Let me know if I need to clarify anything!


Martin Malden

Share the love: