When one style is applied to a certain element, everything is relatively simple. However, if several different styles are applied to the same element at once, then the question arises, which of these styles will be applied in reality?
CSS has a cascading mechanism, which can be defined as a set of rules that determine the order in which multiple styles are applied to the same element.
For example, we have the following web page defined:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Style Cascading in CSS3</title>
</head>
<body>
<p class="footer">To view detailed information follow the link:
<a class="redLink" href="index.php">CSS3 basics</a>
</p>
</body>
</html>
There are three styles defined in CSS, and they all apply to the link.
If several styles are applied to a web page element that do not conflict with each other, then the browser combines them into one style.
So, in this case, all three styles do not conflict with each other, so all these styles will be applied to the link:
Cascading in CSS3
If the styles conflict with each other, for example, they determine a different color of the text, then a complex system of rules is used to calculate the significance of each style. All these rules are described in the CSS specification: Calculating a selectors specificity . Let’s briefly analyze them.
Various selectors can be applied to an element to style it, and each selector is scored in importance. The more points a selector has, the more important it is, and the more priority its styles have over the styles of other selectors.
Tag selectors have an importance value of 1
Class, attribute and pseudo-class selectors are worth 10 points
ID selectors are worth 100 points
Built-in inline styles (set via the attribute style) are worth 1000 points
For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Style Cascading in CSS3</title>
</head>
<body>
<a id="index" class="redLink" href="index.php">CSS3 basics</a>
</body>
</html>
Here, three styles are applied to the link at once. These styles contain two non-conflicting rules:
font-size: 20px; font-weight: bold;
which set the font height to 20px and make the link bold. Since each of these rules is defined in only one style, in the end they will be summed up and applied to the link without problems.
Also, all three styles contain a text color definition, but each style defines a different text color. Since ID selectors have a larger weight, the dark blue color given by the selector will eventually be applied:
#index {color: navy;}
If the selector is a composite selector, then the scores of all sub selectors included in the selector are added together. So, consider the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Style Cascading in CSS3</title>
</head>
<body>
<div id="menu">
<ul class="nav">
<li><a class="menuItem">Home</a></li>
<li><a class="menuItem">About</a></li>
<li><a class="menuItem">Blog</a></li>
<li><a class="menuItem">Contact</a></li>
</ul>
</div>
</body>
</html>
CSS defines as many as five different selectors that set the color of links. As a result, the browser will select the selector #menu aand color the links in dark blue. But why, on what basis would the browser choose this selector?
Consider how we will sum up the scores for each of the five selectors:
| Selector | Identifiers | Classes | tags | Sum |
| .nav li a | 0 | one | 2 | 12 |
| #menu a | one | 0 | one | 101 |
| .nav .menuItem | 0 | 2 | 0 | twenty |
| a.menuItem:not(.newsLink) | 0 | 2 | one | 21 |
| div ul li a | 0 | 0 | four | four |
So, we see that for the selector #menu a in the column, the sum turned out to be the most points – 101. That is, it has 1 identifier (100 points) and one tag (1 point), which in total give 101 points.
For example, a selector .nav .menu Item has two class selectors, each giving 10 points, for a total of 20 points.
In this case, the pseudo :not-class, unlike other pseudo-classes, is not taken into account, however, the selector that is passed to the not pseudo-class is taken into account.
!important rule
CSS provides the ability to completely override the importance of styles. To do this, the !important value is specified at the end of the style :
a {font-size: 18px; color: red !important;}
#menu a {color: navy;}
In this case, regardless of the presence of other high-scoring selectors, the red color defined by the first style will be applied to the links.