By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,493 Members | 1,936 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,493 IT Pros & Developers. It's quick & easy.

Nested CSS Classes, Inheritance

P: n/a
I'm hoping this technique is possible.
Explaining the following code, I want to be able to format the text of
a subclass, depending on who their parent is.

For example, all child elements nested within <div> tags that has a
class=para, will either get underlined or bolded depending on their
parent (theme or section). The importance is that the children has a
class of "para", but that they should be formatted a certain way
depending on their parent.

APPRECIATE IT IF ANYONE CAN HELP.

<style>
div { font-family: Arial; }
div.theme { color: #000099; }
div.section { color: #990000; }
..section.para { font-weight: bold; }
..theme.para { text-decoration: underline; }
</style>

<body>
<div class="theme">
<div class="para">
THEME
</div>
</div>
<div class="section">
<div class="para">
SECTION
</div>
</div>

</body>
Jul 20 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
da********@hotmail.com (Danny) writes:
For example, all child elements nested within <div> tags that has a
class=para, will either get underlined or bolded depending on their
parent (theme or section). The importance is that the children has a
class of "para", but that they should be formatted a certain way
depending on their parent.
Look up descendant selectors in the CSS specification or a tutorial.
http://www.w3.org/TR/CSS2/
.section.para { font-weight: bold; }
..section .para {...}
.theme.para { text-decoration: underline; }


..theme .para {...}

--
Chris
Jul 20 '05 #2

P: n/a
da********@hotmail.com (Danny) wrote:
Explaining the following code, I want to be able to format the text of
a subclass, depending on who their parent is.

For example, all child elements nested within <div> tags that has a
class=para, will either get underlined or bolded depending on their
parent (theme or section). The importance is that the children has a
class of "para", but that they should be formatted a certain way
depending on their parent.

.section.para { font-weight: bold; }


You need a space in there.

..section.para matches any element with class="section para"
..section .para matches the inner element that in
<XXX class="section"><XXX class="para">
which is what I think you're describing here.

Steve

--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <st***@pugh.net> <http://steve.pugh.net/>
Jul 20 '05 #3

P: n/a
Hey Chris and Steve, thanks for your reply....worked like a charm...to
think, all i needed was that ONE SPACE, and it would've
worked......what a waste of a day trying to figure it out on my own.

MUCH APPRECIATED,
Steve Pugh <st***@pugh.net> wrote in message news:<p9********************************@4ax.com>. ..
da********@hotmail.com (Danny) wrote:
Explaining the following code, I want to be able to format the text of
a subclass, depending on who their parent is.

For example, all child elements nested within <div> tags that has a
class=para, will either get underlined or bolded depending on their
parent (theme or section). The importance is that the children has a
class of "para", but that they should be formatted a certain way
depending on their parent.

.section.para { font-weight: bold; }


You need a space in there.

.section.para matches any element with class="section para"
.section .para matches the inner element that in
<XXX class="section"><XXX class="para">
which is what I think you're describing here.

Steve

Jul 20 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.