Order of CSS rules applied to child elements - html

Question

I wonder how the CSS rules applied to the child elements.
The h2's gray style is been overriding because there is a parent level style .level2 h2with blue color.
But the .level1 h2 is not applying the same way.
Please see the below example.
.level1 h2 {
color: green;
}
.level2 h2 {
color: blue;
}
h2 {
color: gray;
}
<div class="level1">
<div class="level2">
<h2>test</h2>
</div>
</div>

Answer 1

It's all about specificity and inheritance.
The notion of a “cascade” is at the heart of CSS (just look at its
name). It ultimately determines which properties will modify a given
element. The cascade is tied to three main concepts: importance,
specificity and source order. The cascade follows these three steps to
determine which properties to assign to an element. By the end of this
process, the cascade has assigned a weight to each rule, and this
weight determines which rule takes precedence, when more than one
applies.
It also depend of the order in the stylesheet if both selectors have the same specificity.
.level2 h2 {
color: blue;
}
.level1 h2 {
color: green;
}
h2 {
color: gray;
}
<div class="level1">
<div class="level2">
<h2>test</h2>
</div>
</div>
Source : https://www.smashingmagazine.com/2010/04/css-specificity-and-inheritance/

Answer 2

This is a matter of CSS Specificity
The concept
Specificity is the means by which browsers decide which CSS property
values are the most relevant to an element and, therefore, will be
applied. Specificity is based on the matching rules which are composed
of CSS selectors of different sorts.
How is it calculated?
Specificity is a weight that is applied to a given CSS declaration,
determined by the number of each selector type in the matching
selector. When specificity is equal to any of the multiple
declarations, the last declaration found in the CSS is applied to the
element. Specificity only applies when the same element is targeted by
multiple declarations. As per CSS rules directly targeted element will
always take precedence over rules that an element inherits from an
ancestor.
Where :
.level1 h2 and .level2 h2 will have a specificity of : 0 0 1 1
While:
h2 only has a specificity of: 0 0 0 1
therefore h2 is less specific.
It will prevail the latest style applied if having the same specificity
You can test/calculate specificity here
Snippet with level2 as last style applied
.level1 h2 {
color: green;
}
.level2 h2 {
color: blue;
}
h2 {
color: gray;
}
<div class="level1">
<div class="level2">
<h2>test</h2>
</div>
</div>
Snippet with level1 as last style applied
.level2 h2 {
color: blue;
}
.level1 h2 {
color: green;
}
h2 {
color: gray;
}
<div class="level1">
<div class="level2">
<h2>test</h2>
</div>
</div>

Answer 3

.level2 h2 is given more importance as it's declared further down in the stylesheet. And it's also more important than h2, because it's composed of a tag name AND a class name.

Answer 4

Since the specifity here is the same for ".level1 h2" and ".level2 h2", the browser looks at the order it is declared in the CSS.
The "h2" tag that makes the tag gray has lower specifity, so that will alwayss be overridden by the other declarations.
h2 {
color: gray;
}
/* Situation 1, level 2 declared first */
.situation1.level2 h2 {
color: blue;
}
.situation1.level1 h2 {
color: green;
}
/* Situation 1, level 2 declared last */
.situation2.level1 h2 {
color: green;
}
.situation2.level2 h2 {
color: blue;
}
Level 2 declared <b>first</b>
<div class="level1 situation1">
<div class="level2 situation1">
<h2>test</h2>
</div>
</div>
Level 2 declared <b>last</b>
<div class="level1 situation2">
<div class="level2 situation2">
<h2>test</h2>
</div>
</div>