Menu
In this code I have paragraph that looks like this
<p class="special">
This is just a test. <em>what color here</em> inheritance work
</p>
I wonder why is not the string "what color here" taking the color from the parent p element.
I mean the class special has the specificity value of 10 and a type such as em has a specificity value of 1 so here 10 is greater then 1.
So I mean the color should have been taken from the selector .special
Here is the markup and css
<!DOCTYPE html>
<html>
<head>
<meta name="keyword" content="html5. tutorial" charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
em
{
font-weight:bold;
color:red;
}
.special
{
color:blue;
}
</style>
</head>
<body>
<p class="special">
This is just a test. Is this color <em>red</em> inheriatance work
</p>
</body>
</html>
//tony
391
asked Dec 10 '25 21:12
The <em> is a separate element inside of .special, so it has its own specificity breakdown. If the code was <em class="special">, the class specificity would apply to the <em>.
74
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
