CSS Specificity: A Detailed Guide (Incl. Best Practices, Examples)

CSS specificity is an important tool in the arsenal of web designers and developers and anyone who changes the design of their site by playing around with cascading style sheets. If you have ever been in the situation that you just couldn’t get an element to behave or a look the way you wanted it to, you have likely felt its power.

But, wouldn’t it be great to harness CSS specificity for your own gains rather than feel at the mercy of it? If you just nodded empathetically, then you have come to the right place. Right here, right now, we will go over this important concept so you can use it to control the look and feel of your website and WordPress theme instead of the other way around.

Understanding CSS Specificity: A CSS Crash Course

So, what exactly is it that we are talking about when we say CSS specificity? The short version is that it’s how the browser decides which property value applies to which element on the page.

To understand this process, you first need to understand how CSS works in general. For that, let’s first settle on some terminology. Here’s a typical piece of CSS markup:

.selector { 	property: value; }

What do all these things mean?

• selector — This is the part that describes the element this piece of CSS applies to. It can be something div, p, h1, or a class or id like .widget or #main-navigation.
• property — The rule applied to the selected element. Can be anything from margin over color to flex.
• value — This is the value of the property, for example, it might be 20px for the property margin-left.

How to Override CSS

In addition to the above, you need to know that browsers process style sheets from top to bottom. That means declarations that appear later in the style sheet overwrite those that came before.

.widget { 	font-size: 18px; }  .widget { 	font-size: 16px; }

In the example above, you can see that both declarations target the same selector and property. However, because the latter is at the bottom, its value will prevail. The browser will always use the last declaration.

However, there is an exception. If the first declaration is more specific than the one following it, it will continue to apply instead. For example, with the markup below, any element with the class widget will have their font size set to 18 pixels instead 16.

.sidebar .widget { 	font-size: 18px; }  .widget { 	font-size: 16px; }

That’s because .sidebar .widget is more targeted than just .widget. And that’s pretty much the gist of CSS specificity.

Why Does This Matter?

So, why is knowing CSS specificity important? Because it is the principle that determines which properties and values apply to a particular element. This includes cases where there are potential conflicts.

As a consequence, CSS specificity is the solution to many cases where you are having problems getting styles to show up on page. It often ends up being a problem of specificity.

Conversely, if you are a theme author, knowing how to properly use specificity is crucial in order to not frustrate users who want to make adjustments, e.g. in a child theme. For that purpose, we will go over some best practices further below.

So, How Is Specificity Calculated?

In order to be able to troubleshoot problems of specificity, you need to be aware of how it works. There are clear rules governing it, and when you understand them, you can use them.

The Order of Selectors

First of all, selectors all have different weights in terms of specificity. Here they are in ascending order, from less to more specific:

1. Type selectors — Think div, h1, a, p but also pseudo-elements like :before and :after.
2. Class selectors — that means normal classes like .site-header, attribute selectors like p[class=footer-credit] but also pseudo-classes such as :hover and :focus.
3. ID selectors — These are selectors that usually only uniquely apply to one specific element per page, written like #main-navigation.
4. Inline styles — Inline declarations like

   always overwrite styling in external CSS files. The same is true for styles declared in the