Sent by Adam Kuehn on 31 May 2005 18:06
Thomas Livingston wrote:
>div#stylea{foo}
>p.styleb{foo}
>
><div id="stylea">
> <p class="styleb">bar</p>
></div>
>
>styleb was not being applied until I did this:
>
>div#stylea p.styleb{foo}
>
>why?
I admit I'm not entirely sure what you're asking. You may need to
get more specific in your question. Let's say you have this:
div#stylea{ font-weight: bold; color: blue; }
p.styleb{ color: red; background: yellow; }
The word "bar" will be bold, blue, and have a yellow background.
div#stylea is more specific than p.styleb. Accordingly, anywhere the
two conflict, #stylea will apply and override .styleb. Hence the
text is blue, not red. However, both selectors still apply to the
element, so where the rules do not conflict, each will be applied.
Hence the text is both bold, and has a yellow background.
If you add div#stylea p.styleb the same principles hold: Anywhere the
selectors conflict, this one is more specific, and will "win".
Anywhere they differ, all will be applied.
So add to the above:
div#stylea p.styleb { color: black; font-size: 2em; }
Now the text will be black, but still bold, still with a yellow
background, and now it will also be twice as big.
Does that help?
--
-Adam Kuehn
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
