CSS tutorial series: CSS Precedence

We mentioned precedence in the previous post. CSS tutorial series: CSS Selectors
But what exactly is precedence?

The term "precedence" means the priority in importance.
This term describes the flow in which CSS styles are applied to a web page's elements. When several styles are used on the same element, the most specific style will be used.

A set of CSS precedence rules are used by the browser when deciding which styles to apply to a specific HTML element. These rules allow the browser to choose which styles to use. The guidelines are:

1. !important
2. Specificity of CSS rule selectors. (which we will get into in a moment).
3. Sequence of declaration.

!important

The !important rule is used to override all earlier styling rules for a specific property on an element.

p {
  background-color: red !important;
}

.paragraph {
  background-color: blue;
}

Let's look at the rules of precedence. Typically, a class selector is more specific than an element type selector in a CSS rule, so the rule using the class selector will take precedence over the rule using the element type selector. That implies that the ".paragraph" rule would set the paragraph's background color to red.
However, because the element type selector "p" indicates that the background color property is important, it will take precedence above any other declarations that do not include the "!important" that target the same HTML element.

Specificity

Different CSS selectors are given different weights according to a concept called CSS Specificity. When several CSS styles are in conflict with one another, it is used to choose which styles will be applied to the element.

Selector	Weighting
element type selector & pseudo-elements	1
class selector & attribute selector & pseudo-classes	10
id selector	100
inline-style	1000
!important	10000+

The table illustrates that a style rule on an id is given much higher significance than a style rule on a class. Similarly, a style rule on a class is given much higher significance than a rule on an element.
In other words, class rules are more specific than element rules, and id rules are more specific than class rules.

Let's give this situation some additional context

<div class="container" id="main" style="background-color:green;">I'm a container</div>

div {
  background-color: yellow !important;
}

.container {
  background-color: purple;
}

#main {
  background-color: red;
}

Consider this example for a moment: what color would the div's background be?

Let's break this example down.
Referring to the table the above, we can see that the element type selector has the lowest specificity of all. However, because the important rule has been used with the element type selector, the background color of yellow will take precedence over all other values, resulting in the div having a yellow background.
Keep in mind that the specificity increases as you increase the combination of selectors.

.container { //0,1,0
  background-color: red;
}

#main.container { //1,1,0
  background-color: yellow;
}

The second rule is more specific, so this container's background color will be yellow.

Sequence of declaration

If we have matching specificity, for example

<a class="link" src="" >I'm a container</a>

.link {
  background-color: red;
}

[src] {
  background-color: yellow;
}

Which of the two do you predict will be given priority?

The cascade algorithm here comes into play. This algorithm's purpose is to solve styling conflicts.

There are 4 distinct stages in the cascade algorithm.

1. Position and rule order: the placement of your CSS rules
2. Specificity: a formula that determines which CSS selector matches the best.
3. Origin: the order in which CSS appears and its source, such as a browser style, a browser extension, or CSS that you have created.
4. Importance: certain CSS rules are weighted more heavily than others, particularly those that use the!important rule type.

Position and rule order

When determining how to resolve conflicts, the cascade takes into account the order and placement of your CSS rules.

If your HTML page has a link that includes CSS at the top and another link that includes CSS at the bottom, the bottom link will be the most specific. Embedded <style> elements also experience the same issue. As you move down the page, they become more specific.

Origin

There is other CSS used on a page in addition to the CSS that you write. The cascade considers where the CSS came from. The operating system, browser extensions, the internal style sheet of the browser, and your own CSS are all included in this. From least specific to most specific, these origins are listed in the following order:

1. User agent base styles: Your browser automatically uses these styles on HTML elements.
2. Local user styles: These may come directly at the operating system level, they can also come from browser extension, like one that allows users to create their own unique CSS for a website.
3. The CSS code you created.
4. The CSS code you created along with the !important rule 5.Local user styles that uses !important which could originate from the operating system or browser extension 6.User agent along with the use of !important which could be default CSS that originate from the browser.

In the example at the beginning of this section, both rules have the same specificity, so the order of the rules implies that the last declared rule will be applied. Meaning the background color will be yellow.