Multiple CSS with same class names on same page?

[jim.p.123]

Hi,

My goal is to have two items, both with the same class and on the same
page, display differently through some external code.

For example:

<div class="green">
<p class="title">Services</p>
<p class="content">Help your business reach success</p>
</div>
<div class="gray">
<p class="title">Manual</p>
<p class="content">View your user manual here</p>
</div>

So, "Services" will show up green, while "Manual" will show up gray,
even though they both are under the same class p.title.

Is there a way to accomplish this?? I have always done it as
p.greentitle {color: green;}
p.graytitle {color:gray; }

But now the requirement is that they both should have the same styling,
that is controlled externally. I have no idea how this can be
accomplished.

Please help!! Thanks a bunch!

Jim

[Chris Vogel]

ji*******@hotmail.com wrote:

Is there a way to accomplish this??

div.green p.title
{
color: green;
}

div.gray p.title
{
color: gray;
}

What if you decide to change the colors later? Your class names won't
make much sense then.

Here's some more information on selectors from the CSS2 Specification:
http://www.w3.org/TR/REC-CSS2/selector.html

[jim.p.123]

Thank you very much Sir, that is wonderful music to my ears!!

The business requirement most likely requires some DIVs to stand out,
and some others not, based on some other criteria unbeknowns to me, but
this solution will resolve the issue for sure!

Thanks again!

Jim