I am trying to understand specificity in the css. I have used class selector .grandparent and type selector p for changing the color of all the paragraph inside each.grandparent.
What I understand is that class is more specific than type, and hence I was expecting the color of each paragraph inside .grandparent to be salmon. As color is inheritable and p is the child of .grandparent so all color of each paragraph is expected to be salmon.However, this is not happening. Please help me to understand this.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>Inside Body</p>
<div class="grandparent">
<p>Inside Grand Parent Div</p>
<div class="parent">
<p>Inside Parent Div</p>
<div class="child">
<p>Inside Child Div</p>
<button class="warning">
what color background?
</button>
</div>
</div>
</div>
</body>
</html>
p{
color: green;
}
.grandparent{
color: salmon;
}