CSS Specificity - Which CSS Rule to apply?

What is Specificity?

Each CSS selector has a specificity value and the more specific the selector is the higher precedence it has. If multiple selectors apply to a single element, the highest specificity CSS rule applies to the element. Have you had an experience where you define a CSS rule for an element, and it doesn't work? You probably have a CSS rule that has a higher specificity value which causes your newly created CSS rule to not apply.

Which CSS rule applies to an element?

1. There are 4 categories of specificity level of a selector in the order of their precedence: (1) inline styles, (2) ID (#), (3) Class (.), and (4) elements.
2. A More specific selector has a higher specificity value, and the higher specificity selector wins the conflict if multiple selectors apply to the same element.
3. If selectors have an equal specificity value, the latest rule ("sort order") found on the page wins the race.
4. The "! important" wins every selector, including inline style.

Specificity is an algorithm used to create specific rules based on selector types and stylesheet types (inline, embedded, or external). If a rule is found to be more specific than one that comes later in the sort order, the more specific rule is applied no matter where the rule resides. Consider the example below:

#header div ul li { text-decoration: none; }

<div id="header">
    <div>
        <ul>
            <li><a href="#">Menu 1</li>
            <li><a href="#">Menu 2</li>
            <li><a href="#">Menu 3</li>
        </ul>
    </div>
</div>

As seen in the table above, if there is an inline style within the element, a count of 1 goes into the first column which will bring the specificity of the selector higher than all of the above.

*Editor's Note: The reason for using CSS is to separate the HTML markup and STYLE. (1) Use of the inline style defeats this purpose, so the inline style should be avoided at all costs. The only exception would be when you are making a blog post where you want the style to be permanent to the particular post. (2) Similarly, embedded style makes it difficult to unify the style of the entire website so embedded style should also be avoided except for when you're creating a standalone webpage such as a squeeze or landing page of a marketing campaign. (3) Do not use !important specificity rule in the production environment as it will override all styles including inline, and trying to resolve a conflict having the !important rule will be tedious.