Let me throw you a scenario you may be very familiar with.

You’re working on a feature for a website or web app that requires some overriding or other changes to the style of a component. You jump into Web Inspector, grab the class for the element(s) in question, and write some new CSS. Easy. However, after refreshing the page, none of the changes have been made — or some have, but not all of them. Maybe the color changes, but the `margin-left: auto` you gave the element remains the same.

This is usually because of specificity. CSS specificity refers to the specificity of the conditions of a CSS selector. Here’s an example:

This selector has a low specificity, since it’s just targeting an `a` element. Let’s increase the specificity.

This CSS is targeting an `a` element inside any element with a class of `modal`. We could add a condition to the class selector, too:

Now the CSS is targeting `a` elements inside `div`s with a class of `modal`.

The more conditions there are in a CSS selector, the higher its specificity. Specificity trumps the cascade, so in this case:

Even though the rule on line 5 appears later in the stylesheet, its specificity is not as high as the rule on line 1, so `a` elements inside `div`s with a class of `modal` will appear green.

How CSS Selectors Are Read

Before we go much further, it’s worth understanding how CSS selectors are read and understood by a web browser. Contrary to many people’s expectations, CSS selectors are read from right to left. Given the following selector:

The browser would query every DOM element on the page to find its target, like so:

Begin target search Find every `a` element on the page In that subset, find elements that are a descendant of an `li` element In that subset, find elements that are a descendant of a `ul` element In that subset, find elements that are a direct descendant of any element that has a class of `site-nav` In that subset, find elements that are a descendant of a `header` element with an ID of `banner` In that subset, find elements that are a descendant of any element with an ID of `home-page` In that subset, find elements that are a descendant of an `html` element Apply styles to target

This may seem like an extreme example, but with SASS, it’s easy to end up with selectors of this complexity and specificity.