css selector specificity is not behaving the expected way.
this is the HTML Code
<nav>
<p>This is the navigation</p>
<a href="blog.html">Blog</a>
<a href="#">Challenges</a>
<a href="#">Flexbox</a>
<a href="#">CSS Grid</a>
</nav>
this is the CSS
this comes first
p {
font-size: 22px;
line-height: 1.5;
}
after that this comes
nav{
font-size:18px;
}
as per my understanding in webpage p elememt inside nav element should have 18px but it is having 22px.
pis a child ofnav, so its specificity will be higher. The solution depends on your code and what you want. Why did you addfont-size: 22px;if you don't want it to be applied?nav{ font-size:18px }targets the<nav>tag, not the<p>tag. Ifphas its own specificfont-size: 22px, it won't inherit from the parent (nav). Even if you give the parent a class and an id and target it likenav.specialClass#myId, thepwill use its own style, unless you use e.g.p{ font-size: inherit}