Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7

Thread: nested classes

  1. #1
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    nested classes

    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?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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

    Code:
    <p class="myp">
        blah
    </p>
    <p class="myp">
    foo foo
    </p>
    Code:
    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
    Code:
    p{
    }
    . But this will style all the ps in he entire document.
    Last edited by abduraooft; 03-24-2008 at 11:32 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [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
    Code:
    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?

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    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!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    New to the CF scene
    Join Date
    Mar 2008
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #6
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    You have to watch the order of your declarations.

    Code:
    /* 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;
    }

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I'm getting the feeling that this is due to specificity of your selectors.
    Have you tried .A_class .B_class p?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •