CSS - Cascading (style rules priority scheme)

About

CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

While the author of a document typically links that document to a CSS stylesheet, readers can use a different stylesheet, perhaps one on their own computer, to override the one the author has specified.

Order of Precedence

Position

Selector matches cascade from the top down. When more than one same selector applies to an element, the later rule overrides the earlier one.

The last rule in the css rule processing with the same selector is chosen.

Example:

p { color: red  }
p { color: blue}
<p>Hello, I'm blue and not red</p>
  • with a external Stylesheet such as Bootstrap (bootstrap.min.css), your custom declaration file (custom.css) must be placed after.
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>

Specificity

  • The HTML p element where two rules want to style it.
<p class="para">My beautiful paragraph will be blue</p>
  • The CSS. The last rule must win according to the cascade rule but as the selector is less specific than the first one, the first rule is applied
p.para { color:blue; } /* I will win because I'm the most specific rule */
p { color:red; } /* I want it red and I'm the last one. According to the cascade rule, 
 I must win but unfortunately, I'm less specific the I lose.  */
  • The result:

Important

An important rules takes precedence over a normal declaration.

The use of important is no more needed if you scope your dom in a shadow dom

Syntax: ! important after a normal declaration:

p { color: aqua ! important }

Example:

  • without the important rule, with a normal declaration
p { color: aqua }
p { color: red  }
<p>Hello, I'm red</p>
  • with the important rule
p { color: aqua ! important }
p { color: red  }
<p>Hello, I'm aqua</p>

Documentation / Reference





Discover More
CSS - (Implementation|Processing Model|Rendering)

How user agents may implements CSS. A user agent processes a source by going through the following steps: Parse the source document and create a document tree (CSSOM) Identify the target media...
CSS - Cascading Style Sheets - Markup Language ( HTML |XML) Skin

CSSHTML CSS is a language for describing the rendering of structured documents (such as HTML and XML) on screen, on paper, in speech, etc. CSS = Skin of HTML SVG XML World Wide Web Consortium...
CSS - Style Sheet (Script|File) - Stylesheet

A stylesheet is a list of rules that specify the presentation of a source document. The stylesheet is a combination of : the external files with the suffix css defined via the HTML link element the...
DOM - Shadow DOM (Scoped DOM)

The Shadow DOM is the part of the DOM that is: written by the DOM engine (generally the Browser) and not by the user. Note: the light DOM represents all DOM custom element The Shadow DOM provides...
What is a css variable (also known as custom property or cascading variable)

CSS variables are variable that can be used in a css property value. They are also known as: custom properties cascading variables (in reference to the cascading processing of CSS They are...



Share this page:
Follow us:
Task Runner