Finding CSS ID and Class Selectors

If you've read my quick guide to CSS you'll know that IDs and Classes can be used to target style changes on our Squarespace site. This guide explains how to find them.

Getting Started

To make this guide easy to follow, I explain how to do this using the Google Chrome browser. If you don't already use it, I thoroughly recommend it, both for Windows and Mac. It's free and can be downloaded from Google's Chrome website.

Once you've installed Chrome, use it to log into your Squarespace website. Everything should work as expected. 

DevTools

Many users don't know this, but Chrome DevTools is a set of authoring, debugging, and profiling tools built into every desktop copy of Google Chrome. To find them, go to More Tools > Developer Tools from Chrome's Main Menu.

When you do this, you'll see a scary window open that looks something like this:

devtools-brine.png

It shows the code 'behind' your website.

Changing One Page using Page IDs

The first thing you can see is the page's unique ID. This is shown near the top of the window; it looks like this:

<body id="collection-56099b55e4b0ec7b8a89d273" class="tweak-social-

The ID is #collection-56099b55e4b0ec7b8a89d273, prefixed with a hash character when used in CSS. Here's a quick example that shows how to use the page ID. If we add this to Custom CSS:

p {color:red;}

it will change the paragraph text to red. However, if you use your page ID, you can limit this change to just this page. For example:

#collection-56099b55e4b0ec7b8a89d273 p {color:red;}

Note that you'll need to change the page ID to match the one on your page! You can find it using the DevTools!

Finding a Specific Selector 

What if you want to change something specific? Well, you can find it using the Object Inspector. Let's say we wanted to change the size of the font used for these titles, for example Beet Season.

brine-changetitle.jpg

Right-click the title 'Beet Season' and then select Inspect from the pop-up menu. You'll see the DevTools window again, but this time the 'Beet Season' element will be highlighted like this:

inspectorbeet.png

Here you can see the text Beet Season and it is wrapped in a class called BlogList-item-title. We can use this class to change the text. Remember that classes need a '.' prefix so the CSS will be:

.BlogList-item-title {
  font-size: 30px;
}