CSS Quandary

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 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 ()?

<!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

Newbie Poster

12 posts since May 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

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

Airshow

WiFi Lounge Lizard

Moderator

2,683 posts since Apr 2009

Reputation Points: 321

Solved Threads: 372

2 Years Ago

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 and 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...

CNIDog

Newbie Poster

12 posts since May 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

reread the css tutorial

Your css has[INDENT] element COMMA element[/INDENT]the tutorial has[INDENT] element SPACE element[/INDENT]css descendants are separated by spaces, css lists are separated by commas
You can also group descendants,
element space element comma element space element

almostbob

Posting Sensei

3,149 posts since Jan 2009

Reputation Points: 571

Solved Threads: 376

2 Years Ago

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

Thank you!

reread the css tutorial

Your css has[INDENT] element COMMA element[/INDENT]the tutorial has[INDENT] element SPACE element[/INDENT]css descendants are separated by spaces, css lists are separated by commas You can also group descendants, element space element comma element space element

CNIDog

Newbie Poster

12 posts since May 2009

Reputation Points: 10

Solved Threads: 0

2 Years Ago

Thanks Bob, you beat me to it.

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

Airshow

Airshow

WiFi Lounge Lizard

Moderator