...

View Full Version : nested classes



geo_p
03-24-2008, 11:14 AM
My question has to do with class names. If I have the following code:


----HTML
<p>

blah
</p>

<div class="main">

<div class="A_class">


<div class="B_class">

<p>
foo foo
</p>
</div>
<p>
bar bar
</p>
</div>
</div>

----CSS

p{
}

.main{
}

.A_class{
}

.A_class p{
}

.B_class{
}


How can I define a class to set the look of a p element in a B_class and another p element to set the look of a p element in A_class? I've tried for B_class for example:

p.B_class{
}

.B_class p{
}

but none works. The browser (I used Firefox) ignores the B_class and displays the foo like an A_class p.

I have the impression that I have mixed up something in the nested class naming. I've read http://www.htmldog.com/guides/cssadvanced/specificity/ but it didn't seem to clarify something. Any suggestions?

abduraooft
03-24-2008, 11:30 AM
The problem is caused by the poor understanding of class attribute. If we have two or more elements, and if we want to apply a common style to them, we may consider them as a class of objects and give a class name for each of them. In your case, you can easily apply common style to two ps


<p class="myp">
blah
</p>
<p class="myp">
foo foo
</p>

p.myp{ background:blue;}
Refer http://www.htmldog.com/guides/cssintermediate/classid/

In your above code, since one p has no class/id and it's not wrapped by any other element, the only way to apply a style is

p{
}. But this will style all the ps in he entire document.

geo_p
03-24-2008, 04:56 PM
[QUOTE=abduraooft;669021]
In your above code, since one p has no class/id and it's not wrapped by any other element, the only way to apply a style is

p{
}
In my example code, isn't
<p>
bar bar
</p>

wrapped by the div element tagged as "A_class" and

<p>
foo foo
</p>
wrapped by the div element tagged as "B_class" ? Or do I get something wrong about wrapping?

abduraooft
03-24-2008, 05:01 PM
How can I define a class to set the look of a p element in a B_class and another p element to set the look of a p element in A_class? I've tried for B_class
Sorry, your intention is not fully clear!

geo_p
03-24-2008, 05:31 PM
Sorry if I haven't made my self clear.

I have the following code:

<p>

blah

</p>

<div class="main">


<div class="A_class">



<div class="B_class">


<p>
foo foo
</p>

</div>

<p>
bar bar
</p>
</div>

</div>



and this CSS file:
p{
}

.main{
}

.A_class{
}

.A_class p{
}

.B_class {
}

I put a P element inside the div "A_class", the "bar bar". Since it's inside "A_class" the format of P is handled by css' ".A_class p".

I then put a P element inside the div "B_class". the "foo foo". I can't find the syntax in the css that will make this P to look like a ".B_class p".
I've tried to put in the css
.B_class p{
}
and
p.B_class {
}
but they don't work. The this P element looks like a ".A_class p". But I want it to look like a ".B_class p".

Again, sorry for not clarifying myself.

sobrien79
03-24-2008, 06:17 PM
You have to watch the order of your declarations.



/* must be first because this will select all p tags under this class. which includes the p tag under B_class. */
.A_class p {
color: #ff0000;
}

/* must be second if you need to style both p tags differently. */
.B_class p {
color: #00ff00;
}

Apostropartheid
03-24-2008, 08:00 PM
I'm getting the feeling that this is due to specificity of your selectors.
Have you tried .A_class .B_class p?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum