Hey Brett,
There are many ways to do what you need - so you may not need to use a
multiple class selector at all.
OPTION 1
------------------
Using the html example you sent in a previous email, you could target
instances of content using descendant selectors based on the parent classes
alone - without the need for styling the "information" or "more-styles"
classes at all.
HTML:
<div class="first-class">
<p class="information">Content goes here on line 1</p>
</div>
<div class="second-class">
<p class="information more-styles">Content goes here on line 2</p>
</div>
CSS
.first-class p { background: #FCC; }
.second-class p { background: #AAC; }
OPTION 2
------------------
You could do the same with a combination of parent classes and the
"information" class:
.first-class p.information { background: #FCC; }
.second-class p.information { background: #AAC; }
OPTION 3
------------------
You could style just the two class instances alone (without the parent
classes):
p.information { background: #FCC; }
p.more-styles { background: #AAC; }
This would style any <p> with a class of "information" with a background of
#FCC, and any <p> with a class of " more-styles" with a background of #AAC.
If the <p> has both classes, then "more-styles" would win (as it is written
after the other rule) and the background would be #AAC.
OPTION 4
------------------
Finally, you could use a multiple class selector for the second rule (though
this seems unnecessary, as you can see from the options above):
.information { background: #FCC; }
.information.more-styles { background: #AAC; }
One reason to avoid the multiple class selector (".information.more-styles")
is IE5's and IE6's lack of support.
I wrote an article on multiple classes some time ago, in case you want a
little more info:
http://www.maxdesign.com.au/presentation/multiple-classes/
HTH
Russ
on 24/2/09 4:29 AM, Brett Patterson at wrote:
> So, where:
> <p class="information more-styles">
>
> what I was wondering (I should have worded better, sorry) was if I took:
>
> .information
> {
> background-color: #FFF;
> color: #000;
> }
> /* This below, will apply only to the paragraph with the more-styles class
> applied to it */
> .more-styles
> {
> color: #333;
> }
>
> and applied to both of those paragraph (through the classes), which is the
> last paragraph. The first paragraph has only one class assigned to
> it...whereas, the last paragraph has 2 classes assigned: the first class
> assigned, i.e. information, contains the formatting (the formatting applied is
> the background-color, and the font's color (color)) that will apply to all the
> paragraphs with that class assigned to them (it); the last class assigned,
> i.e. more-styles, will change only the font's color in that particular
> paragraph...
>
> Is what the style you have applied, like if I had done this instead of what is
> applied at the top?:::
>
> .information.more-styles
> {
> styles: here;
> }
>
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
