How to apply one rule to multiple selector

Question

I want to apply a format for all headers.

So, I added

 .myformat h1, h2, h3, h4, h5, h6  {  margin-bottom : 1em; ... }

Written like that, it doesn't consider the first hx. The rules aren't applied to h1.

When I write it like

 .myformat h1, h2, h3, h4, h5, h6, h1  {  margin-bottom : 1em; ... }

everything is fine. The rules are applied to h1, h2, ... and h6.

It's suspicious... I guess that I have a problem somewhere else but I'm unable to see it.

Is it the correct way to apply a rule to multiple selectors ?

I have the same behavior on IE9 and Chrome20 on window. Also replicated on Firefox12 on Fedora15

---

EDIT

I want to be able to do something like

<h1 class="myformat">This text will be red and 
                     or all hx where I apply "myformat"
</h1>
<p class="myformat">This text will be yellow only
                    when myformat is applied on a paragraph
</p>

I created .myformat h1, h2, h3, h4, h5, h6 { margin-bottom : 1em; ... } believing this "myformat" will only be applied on headers.

I wasto be creating .myformat p { margin-bottom : 3em; ... }
but I blocked on <h1 class="myformat">text</h1>

Answer 1

Try it like this .myformat h1, .myformat h2, .myformat h3, etc etc.

This is assuming that the h1's h2's h3's are all in a div called .myformat.

You can check it here: http://jsfiddle.net/fYgdA/5/