Menu
In the following HTML/CSS, why is the link color green and not blue, i.e. why does "p.description" override "#nav" but "p.description a" does not override "#nav a"?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#nav {
color: black;
}
#nav a {
color: green;
}
p.description {
color:red;
}
p.description a {
color:blue;
}
</style>
</head>
<body>
<div id="nav">
<p class="description">This is a test and <a href="#">this is a link</a>.</p>
</div>
</body>
</html>
551
Because an id selector plus a type selector is more specific than two type selectors and a class selector. See the specification on specificity.
So it does cascade, but the rules for the order in which the cascade happens are not what you thought they were.
79
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
