Trying to comprehend the discrepancy between two CSS rules, I am currently reviewing this HTML file.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>specificity</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside,
article,
section,
header,
footer,
nav {
display: block;
}
body {
font-family: Georgia;
font-size: 120%;
}
/*add styles here*/
#mainContent p {
color: red;
}
p {
color: blue;
}
.green {
color: green;
}
/**/
</style>
</head>
<body>
<section id="mainContent">
<p>I am a paragraph nested inside a section. I also have a <strong class="green">strong tag</strong> nested inside of me.</p>
</section>
</body>
</html>Still grappling with the clarity of the following statement:
Specificity works just fine until inheritance is involved. If a child element has a style that differs or conflicts with the parent styles, the child styles always win. So for
strongelement above, we are seeing inheritance and not specificity.
However, if I assign the green class to the <p> element, an observation of specificity can be made as the green style is disregarded in favor of the style applied with an ID to the paragraph.
The query then arises, given that <p> is a child of <section>, shouldn't inheritance be evident here as per the previous statement, similar to what is observed with the <strong> element?