What's With h1, h2 ? ? ? [modified]

[W Balboos GHB]

The following works for h3 - h6, but not h1 or h2

.test h1,h2,h3,h4,h5,h6 {
font-style: italic;
}

.test h1,h3,h5 {
color: red
}
.test h2,h4,h6 {
color: maroon;
}

Specifically, 'italic' is ignored for h1, h2, red ignored for h1, maroon ignored for h2 BUT If I rearrange so that neither h1 nor h2 is the first in either list, then all is well for all h's OR If I put a dummy value as the first arg in the lists, all is well. [ex: .test dummy, h1, h2, h3, h4, h5, h6 { stuff } Is there some rule about h1,h2 I never learned, or is this a weird bug in CSS ? Additional Notes: This is in an external style sheet, but seems to be the same when declared in

Browsers tested: Firefox 3.6.10 and IE6 . Also, rendering in Expression Web 3 design window. Header: Anyone know what's up (and are there other such weirdnesses ?)

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010

modified on Friday, September 24, 2010 9:48 AM

[Sunasara Imdadhusen]

Hi Here is the solution

<style type="text/css">
.test
{
font-style: italic;
}

    h1.test,h3.test,h5.test
    {
        color: red;
    }
    h2.test,h4.test,h6.test
    {
        color: maroon;
    }
</style>

Please do let me know, if you have any doubt. Please provide "Vote" if this would be helpful, and make "Correct Answer" if this would be correct answer.:rose: Thanks, Imdadhusen

sunaSaRa Imdadhusen +91 99095 44184 +91 02767 284464

[W Balboos GHB]

Thanks for your effort, but making this work for h1 through h6 was not my question. The question is 'why does putting h1, h2 as first element in the list fail?' Putting a dummy value in front of them, or rearranging them, also fixed the values. Why does h3, h4, h6, h6, h1, h2 work for all, yet h1, h2, h3, h4, h5, h6 only work for h3-h6 ? Is this a bug in CSS, and are there other known similar bugs? As an aside, the .test { font-style: italics; } is rather extreme - requiring correction styles whenever that class is declared and italics are not required. I think this point is somewhat a matter of taste. None-the-less, thanks for your input. At least I know someone is reading this forum!

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010

[Macotti]

".test h1" means h1 INSIDE another element with a class equal to "test". Maybe you were expecting your style to work with headings outside of that element with the "class=test". Subsequent headings did not encounter the problem because there were no constraints, that is they did not have to be inside the said element to adapt the style.

[W Balboos GHB]

Well - actually, if you consider what I posted more carefully when proposing an explaination: If it were simple the adjacency, the the declaration that went .test h1, h2, h3, . . . h6 would only fail for h1 (or h2 through h6). It fails for h1 and h2 . Your supposition that the class declaration only applies to the first element doesn't follow my description of the behavior. Your analysis is incorrect for another reason: to limit the declaration as specifically as you propose, wouldn't the syntax be more like: h1.test, h2.test, h3, h4, h5, h6 {} ? ? ? The commas are the syntax used to tell the browser "interpret all of these tags with the following styles" Your analysis would be more correct if I had left out the commas between the h# tags. None the less - I thank you for at least considering the problem. Pretty much no one wants to touch it.

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010

[Macotti]

Oh I see. Stupid me. Weird indeed. Unless of course the styles were overridden somewhere.

[W Balboos GHB]

You're probably right about something overriding the values - but I thought specificity was on my side, here, as well as the last reference winning. An interesting note: If, instead of declaring the <hn class="test"> for each individual tag, if I wrap them all in a single <div class="test">, (instead) all is well. So, the interpretation is more predictable when the style is less direct.

THIS WORKS CORRECTLY
<div class="test">
  <h1>Testing h1 </h1>
  <h2>Testing h2 </h2>
  <h3>Testing h3 </h3>
  <h4>Testing h4 </h4>
  <h5>Testing h5 </h5>
  <h6>Testing h6 </h6>
</div>

Curious

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010

[Macotti]

Can I see your code? I tried creating a test page using the style in your first post like this. I'm only assuming that you did it somewhat like this.

CSS Test Page
.test h1,h2,h3,h4,h5,h6 {
font-style: italic;
}

.test h1,h3,h5 {
color: red
}
.test h2,h4,h6 {
color: maroon;
}

<h1 class="test">Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>

Everything went as expected. Since styles with the syntax

<classname> <element>
{
/*styles here*/
}

requires the element to be inside another element with the stated class. Like

<div class="test">
<!--
the element to adopt the style from the previous declaration
-->
</div>

h2 was italicized though. your problem was it was not italicized right? the color red for h1 and color maroon for h2 did not apply as expected. you said you encountered no problem when you put it inside

<div class="test"></div>

right? try creating another set of headers outside the "div" tags and you will encounter the problem again. I've been working with CSS for quite a while now. I'm just really curious about this. whatever you might have in mind about this, i'll be glad for a reply. :)

[W Balboos GHB]

Right now, I'm still leaning towards a bug - for if you put a dummy element as the first element, q,h1,..., all of the h's work. So far, we know it's a positional problem. A lot of experiments come to mind - what if I declared each of the h's separately, but still made them part of class test? Suppose the first element were another type - a valid one, instead of a dummy, does the style still fail?

Macotti wrote:

I'm just really curious about this.

Your words, above, were very consoling. I've been a developer since the 80's, but HTLM, especially with styles, is relatively new. There's always the feeling I've missed something obvious conflicting with the feeling that I'm pretty good at finding bugs in my code. I'll let you know if I discover anything.

"The difference between genius and stupidity is that genius has its limits." - Albert Einstein

"As far as we know, our computer has never had an undetected error." - Weisert

"If you are searching for perfection in others, then you seek dissappointment. If you are searching for perfection in yourself, then you seek failure." - Balboos HaGadol Mar 2010