On 2007-02-26, xen <xen@rotmail.nlwrote:
Quote:
Hey there,
>
In my html file I use a <div class="quote">.
In my css file I define .quote
I need to specify the margins for <pinside the <div>
Today I learned that I can do this using
>
.quote p {
margin-top: 5px;
margin-bottom: 5px;
}
>
All is well. Now inside this <div class="quote"I want to be able to
have a couple of <pblocks use different, bigger margins. So I define
a new class
>
.quote-walsch {
margin-top: 15px;
margin-bottom: 15px;
color: red;
}
>
and hope to use it using <p class="quote-walsch">
>
However, this doesn't work.
The <pas redefined for class "quote" overrides the margins for class
"quote-walsch", effectively disabling those margin settings. The color
"red" does apply so the class is in effect, but he margins get
overridden. If I apply the new margins using an inline style attribute
This sounds like a "specificity" problem. Try ".quote .quote-walsch" for
the second selector, or ".quote p.quote-walsch" to be sure and see
http://www.w3.org/TR/CSS21/cascade.html#specificity Quote:
><p style="margin-top: 15px; margin-bottom: 15px;">
>
then it does work.
>
So as far as I can see, I can do one of two things.
>
1) do not use classes for the bigger-margin <pblocks but use inline
style attributes
2) do not define ".quote p" but instead define ".quote-p" and apply
this class to every regular p block using <p class="quote-p">.
Those solutions would work too.
Quote:
I would like to use ".quote p" AND apply bigger margins to several <p>
blocks using classes. Is this possible? All browsers I use (IE4,
Opera7, FF2) behave the same.
Should be fine, just provide specific-enough selectors to get the
margins all the way to where you want them to go.
If .quote .quote-walsch doesn't match quote-walsches outside .quotes,
elsewhere in the document, and that's what you want, you can just write
it a bit tautologically like this:
..quote-walsch, .quote .quote-walsch { ... };
which means "anything with class quote-walsch or that has class
quote-walsch and is a descendent of a .quote". I suppose you could read
it as "anything that's .quote-walsch even if it's inside a .quote".
