How does a CSS rule get applied without applying it? Below is code from a blank page with no links. The only CSS rules are those I have defined, and although I have not applied the rules, the resulting HTML reflects the application of the last rule defined. It also ignores all sub-selectors not preceded by a comma. In order to get <h1> to be green (per the #frog definition) I have to put a comma before the h1.
What am I missing? Why are the rules being applied without declaring an id (<div id="frog">)?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#frog ,h1,h2,h3,h4,h5,h6
{
color:green;
}
#squid h1,h2,h3,h4,h5,h6
{
color:red;
}
</style>
</head>
<body>
<!--There is no div declaring "frog" or "squid", but
the rules are being applied, regardless - WHY???-->
<h1>This is h1</h1><!--This is green - and I don't know why!!-->
<h2> This is h2 </h2><!--This is red - and it shouldn't be!!-->
</body>
</html>