DEV Community

loading...
Cover image for CSS- The Cascade !

CSS- The Cascade !

Garima
Full Stack Developer
・4 min read

Sometimes two or more competing CSS rules are applied to a particular element. In this post we will find out how browser choose which property to use for the element and how to control it.

CSS stands for Cascading Stylesheets. The Cascade is the algorithm for solving conflicts where multiple CSS rules are applied to an HTML element. If we have this <p> tag.

<p> Let's Check which color is chosen by the browser </p>
Enter fullscreen mode Exit fullscreen mode
p{
color: red;
}

p{
color: blue;
}
Enter fullscreen mode Exit fullscreen mode

So why this happened ?

Understanding the cascade algorithm helps us understand how the browser resolves the conflicts like these ..

The Cascade can split into 4 stages

1. Position and order of appearance :- The order in which the CSS rule appear in the Stylesheet.

2. Specificity :- An algorithm which determines which CSS property have strongest preference.

3. Origin: the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS.

4. Importance :- some CSS rules are weighted more heavily than others, especially with the !important rule type.

Position and Order of Appearance

The order in which our CSS rules appear in the Stylesheet and their appearance is always taken into consideration by the cascade to calculate the conflicts if any.

The demo right at the start of this blog is the most straightforward example of positioning. There are two rules that have selectors of identical specificity, so the last one to be declared won.

Styles can come from various sources on an HTML page, such as a <link> tag, an embedded <style> tag, and inline CSS as defined in an element's style attribute.

If you have a <link> that includes CSS at the top of your HTML page, then another <link> that includes CSS at the bottom of your page, the bottom <link> will have the most preference. The same thing happens with embedded <style> elements, too. They get more specific, the further down the page they are.

This ordering also applies to embedded <style> elements. If they are declared before a <link>, the linked stylesheet's CSS will have the most specificity.

An inline style attribute with CSS declared in it will override all other CSS, regardless of its position, unless a declaration has !important defined.

Position also applies in the order of your CSS rule. In this example, the element will have a purple background because background: purple was declared last. Because the green background was declared before the purple background, it is now ignored by the browser.

.my-element {
  background: green;
  background: purple;
}
Enter fullscreen mode Exit fullscreen mode

Specificity

Specificity is an algorithm which determines which CSS selector is the most specific, those calculations. By making a rule more specific, you can cause it to be applied even if some other CSS that matches the selector appears later in the CSS.

Suppose that we are working this HTML and CSS.

<button class="btn">Hello, Specificity!</button>
Enter fullscreen mode Exit fullscreen mode
button {
  color: red;
}

.btn{
  color: blue;
}
Enter fullscreen mode Exit fullscreen mode

There's two competing rules here. One will color the button red and the other will color it blue.

Which rule gets applied to the element?
Understanding the CSS specification's algorithm about specificity is the key to understanding how CSS decides between competing rules.

Specificity is one of the four distinct stages of the cascade.

Preference of Selectors from lowest to highest

1. Universal Selector
A universal selector (*) has no specificity and gets 0 points. This means that any rule with 1 or more points will override it.

*{
margin: 0;
padding: 0
}
Enter fullscreen mode Exit fullscreen mode

We usually use this to reset the default properties of CSS.

2. Element or pseudo-element selector
An element (type) or pseudo-element selector gets 1 point of specificity .

Type selector

div {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-element selector

::selection {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

3. Class, pseudo-class, or attribute selector
A class, pseudo-class or attribute selector gets 10 points of specificity.

Class selector

.my-class {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Pseudo-class selector

:hover {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

Attribute selector

[href='#'] {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

The :not() pseudo-class itself adds nothing to the specificity calculation. However, the selectors passed in as arguments do get added to the specificity calculation.

div:not(.my-class) {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

This example would have 11 points of specificity because it has one type selector (div) and one class inside the :not().

4. ID selector
An ID selector gets 100 points of specificity, as long as you use an ID selector (#myID) and not an attribute selector ([id="myID"]).

#myID {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode

5. Inline style attribute
CSS applied directly to the style attribute of the HTML element, gets a specificity score of 1,000 points. This means that in order to override it in CSS, you have to write an extremely specific selector.

<div style="color: red"></div>
Enter fullscreen mode Exit fullscreen mode

6. !important rule
Lastly, an !important at the end of a CSS value gets a specificity score of 10,000 points. This is the highest specificity that one individual item can get.

An !important rule is applied to a CSS property, so everything in the overall rule (selector and properties) does not get the same specificity score.

.my-class {
  color: red !important; /* 10,000 points */
  background: white; /* 10 points */
}
Enter fullscreen mode Exit fullscreen mode

There are a lot of Selectors with their specificities for more go to references.

References

Discussion (2)

Collapse
cmuralisree profile image
Chittoji Murali Sree Krishna

Nice info

Collapse
garimasharma profile image
Garima Author • Edited

Thankyou ❤ You can bookmark the series for more of such information.