How to Find CSS Selectors

The custom elements feature allows you to control the typography of any section of your website by targeting CSS selectors. In this article we are going to look at how to find CSS selectors.

Understanding CSS Selectors

CSS selectors can be IDs or Classes. Here's an example:

                        <h2 class="sidebar-heading">Welcome!</h2>
                    

In this example, we are using a class named sidebar-heading.

                        <button type="button" id="buy-button">Buy it now</button>
                    

In this example, we are using an ID named buy-button.

When you are targeting a class in CSS it is proceeded by a period, IDs are prefixed with a hash symbol.

                        .sidebar-header { margin-top: 20px }
                        #buy-button { background-color: black }
                    

A single element can have both classes and IDs, it can also have multiple classes. However, only one ID is permitted.

                        <h2 class="heading sidebar-heading" id="heading">Welcome!</h2>
                    

Finding CSS Selectors

Most modern browsers have tools that make it possible to find the selectors of an element without having to view the entire page source.

In Chrome, right click an any part of your website and click Inspect and you will be shown a myriad of information about the element.

This might seem like information overload, but for our purposes we only need to focus on one small part of this view, the Styles column.

The Styles column tells you which styles are being applied to an element, the list is ordered by priority. In most cases the styles at the top are being applied and overwriting any displayed below.

In the example above we have right-clicked the byline element, and Chrome is telling us that there are styles being applied to the .byline class.

Building Your Setting

Now we know the CSS Selector of an element we want to control the typography of, we can easily create a custom element inside the SizeChart.