How do I use the alignment of one class and the font of another?

Question

I have to modify a website that another developer wrote.

I need the font and size from one class, but I need the formatting from another.

html:

 <div class="box1">
     <div class="box2">
         <p class="p1">
            The text I need printed
         </p>
     </div>
 </div>

css:

.box1
{
    float:left;
    width:500px;
    padding:10px 0px 10px 15px;
}

.box1 p.p1
{
    font-size:15px;
    color:#ff00ff;
    line-height:22px;
}

    ...

.box2
{
    padding:10px;
}

.box2 p.p1
{
    font-size:12px;
    color:#ff0000;
    line-height:22px;
}

How do I use p1 from box1 while keeping the alignment the same? I would rather not define a new .box2 p.p2 unless that is the only way.

Thanks.

Not sure I understand, but did you try just removing the `.box2 p.p1` rule? — bfavaretto, Mar 16 '12 at 15:48
It is using the p1 rule from box2. Is there a clean way to use the p1 rule from box1? — Raymond, Mar 16 '12 at 15:51
Refer: [Can a CSS class inherit one or more other classes?][1] [1]: http://stackoverflow.com/questions/1065435/can-a-css-class-inherit-one-or-more-other-classes — Arun Singh, Mar 16 '12 at 15:52

score 1 · Answer 1 · answered Mar 16 '12 at 15:55

1

From the examples you posted, I don't think you need multiple classes here (as others are suggesting). Do you realize what is going on? Your paragraph is being applied both paragraph rules you have defined, .box1 p.p1 and .box2 p.p1. Since the latter overwrites all properties from the former, those are the styles you see.

I think all you need to do is remove the second rule (.box2 p.p1) entirely.

answered Mar 16 '12 at 15:55

bfavaretto

71,580
16
111
150

Unfortunately, I can't remove .box2 p.p1 because it is used in other places. – Raymond Mar 16 '12 at 16:11
Can you move it before the other rule? Will that negatively affect other parts too? – bfavaretto Mar 16 '12 at 16:25

score 0 · Answer 2 · answered Mar 16 '12 at 15:49

I am not entirely clear on what you are trying to accomplish, but the basic answer to your question (about basically needing to combine two classes) is that you can have an element with more than one class, just separate them by spaces

class="class1 class2 ...."

techlead · Accepted Answer · 2012-03-16T17:07:10.923

Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
            .box1
            {
                float:left;
                width:500px;
                padding:10px 0px 10px 15px;
            }
            .box1 .box2 p.p1
            {
                font-size:15px;
                color:#ff00ff;
                line-height:22px;
            }
            .box2
            {
                padding:10px;
            }
            .box2 p.p1
            {
                font-size:12px;
                color:#ff0000;
                line-height:22px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
            <div class="box2">
                <p class="p1">The text I need printed</p>
            </div>
        </div>
    </body>
</html>

Here's a demo - http://jsfiddle.net/fedev/ZwrfV/

UPDATED

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Untitled Document</title>
        <style type="text/css">
            .box1
            {
                float:left;
                width:500px;
                padding:10px 0px 10px 15px;
            }
            .box1 p.p1, .box1 .box2 p.p1
            {
                font-size:15px;
                color:#ff00ff;
                line-height:22px;
            }
            .box2
            {
                padding:10px;
            }
            .box2 p.p1
            {
                font-size:12px;
                color:#ff0000;
                line-height:22px;
            }
        </style>
    </head>
    <body>
        <div class="box1">
                        <p class="p1">The text I need printed under box 1</p>
            <div class="box2">
                <p class="p1">The text I need printed under box 2</p>
            </div>
        </div>
    </body>
</html>

Another demo - http://jsfiddle.net/fedev/M9mWN/

This almost worked! "The text I need printed" is correct. And other texts where box2 p.p1 are in the other format. The only problem is other texts that were under box1 p.p1 are not formatted. How do I keep that formatting? Thanks — Raymond, Mar 16 '12 at 16:45

How do I use the alignment of one class and the font of another?

3 Answers3