CODEWITHSUNDEEP
csscss-selectors
Luc M
Luc M

Reputation: 17324

How to apply one rule to multiple selector

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>

Upvotes: 4

Views: 24997

Answers (3)

Oleg
Oleg

Reputation: 25008

It would be appropriate to have one rule .myformat{margin-bottom:1em;} if your markup resembles the sample below. This will work because of selector specificity and will apply to any element that has myformat class.

<h1 class="myformat">Header</h1>
<h2 class="myformat">Subheader</h2>
...

Given that you want to separately style headers and paragraphs with this same myformat class, you have two options. You could either have verbose (overqualified) selectors like

h1.myformat, h2.myformat, h3.myformat {/*some style*/}
p.myformat {/*some other style*/}

or you could opt-in for separate class names which would be preferable imo

.myformat-title {/*some styles to apply to headers*/}
.myformat-content {/*some styles to apply to paragraphs*/}

When you say .myformat p... but I blocked on <h1 class="myformat">text</h1>, what exactly do you mean? If the end result is different from what you've expected, maybe you're experiencing margin collapsing?

Upvotes: 2

driangle
driangle

Reputation: 11779

You're using the correct syntax. The problem you're having likely has to do with the selector .myformat h1. Check your html code, that selector will only find an h1 which is within an element with the class myformat. For example:

<div class='myformat'>
   <h1>Header One</h1>
</div>

If myformat is on the h1 then you'll want to use the selector h1.myformat. So that selector will work if your html is like:

<h1 class='myformat'>Header One</h1>

Upvotes: 4

James
James

Reputation: 3293

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/

Upvotes: 7

Related Questions