tags:

views:

52

answers:

2

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"?

alt text

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<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>
+11  A: 

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.

David Dorward
Just to add value to the answer, he could be more specific by changing his selector to `#nav p.description a`
Josh Stodola
thanks josh that was the fix I was looking for
Edward Tanguay
A: 

Its green because the css rule #nav a {color: green;} stipulates it.

To make it blue do this #nav a {color: blue;}

This doesn't answer the question. He wants to know why it's behaving like this, and he only wants blue links within the description paragraph.
Matthew Flaschen