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>

CNIDog,

CSS is working exactly as designed. #frog,h1,h2,h3,h4,h5,h6 { .... } means "apply the rules in the {curly braces} to each of the listed selectors". #frog means "the HTML element with an ID of 'frog' ". h1 means "all HTML elements of type <h1>...</h1>".
etc. # is only one of several selector types. Use . for all HTML elements of a certain class, eg. .blueBack { background-color:blue; } .

These are the main ones. There are others. See http://www.w3.org/TR/CSS21/selector.html for the official words on CSS selectors. It's great reading.

Airshow

Thank you, but I am still confused. If #frog means "the HTML element with an ID of 'frog' ", why is it applying the rule to HTML elements WITHOUT the ID of 'frog'? Like it has for the last several years I have been playing with CSS?!

On the referenced site (http://www.w3.org/TR/CSS21/selector.html) I find the relevant section here:

E F Matches any F element that is a descendant of an E element.

In the case of my example, E="frog" or "squid" and F = "h1, h2, h3 ,etc...." The <h1> and <h2> tags in the body of my example are NOT descendants of "frog" (or "squid"), therefore it should not match! But it does!! WHY??? :(

Are not the names to limit the application of the rule to tags with the specified ID or Class? I thought the only way an element would take on a CSS rule is if the element (or the element's parent) was so ID'd or classified.

What am I missing? If it's going to simply apply the last rule on the page regardless of whether or not the HTML refers to an ID or Class, why bother with names? (That's a rhetorical question... I know why they're named, but I don't know why the rules are being applied without a reference to the ID or Class). What's more confusing, is that I have successfully developed a number of websites and have never experienced this anomaly before. I'm missing something simple, and I can't see it in my frustration...

reread the css tutorial

Your css has element COMMA elementthe tutorial has element SPACE element
css descendants are separated by spaces, css lists are separated by commas
You can also group descendants,
element space element comma element space element

I knew it was something stupid... :icon_redface:

Thank you!

reread the css tutorial

Your css has element COMMA elementthe tutorial has element SPACE element
css descendants are separated by spaces, css lists are separated by commas
You can also group descendants,
element space element comma element space element

Thanks Bob, you beat me to it.

Sorry CNIDog, I should have mentioned the difference between commas and spaces - very important.

Airshow

I know what I did to learn that single point
but its embarrassing to relate just how long it took

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.