CODEWITHSUNDEEP
htmlcss
user2371684
user2371684

Reputation: 1555

Apply multiple classes for single div

I have created a submenu, I want the background color of the divs to change depending on what page the submenu is loaded.

first example (with code working for one page):

HTML 

<div class="tablecontainer">
    <div class="left">
        <p><a href="#">Link1</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link2</a></p>
    </div>
    <div class="left">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%  
}
.left {
    float: left;
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.left a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.right {
    margin-left: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center; 
}
.right a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    background-color: #660066;
    text-align: center;
}
.cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}

jsfiddle: example1

and the second example

HTML

<div class="tablecontainer">
    <div class="left leftYH">
        <p><a href="#">Link1</a></p>
    </div>
        <div class="right rightYH">
        <p><a href="#">Link2</a></p>
    </div><div class="left leftYH">
        <p><a href="#">Link3</a></p>
    </div>
    <div class="right rightYH">
        <p><a href="#">Link4</a></p>
    </div>
    <div class="cell cellYH">
        <p><a href="#">Link5</a></p>
    </div>    
</div>

CSS

.tablecontainter{
    width:100%;
}
.left{
    float: left;
}
.left, .right{  
    width: 50%;
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYh, .rightYh, cellYH{
    background-color: #660066;  
}

jsfiddle: example2

where I have grouped all class with similar attributes and others where the attributes are unique. But this code is not at all working. Any clue anyone where I screwed up?

Thanks

Upvotes: 0

Views: 76

Answers (3)

Burdock
Burdock

Reputation: 1105

There are 2 ways to inherit from more then one CSS class~

  • Multi class styles: this states that all classes gain the following attributes

     left a, .right a, .cell a{
       ....

 }

  • multi class elements: you can apply more then one class to any html tag like to

    <a class="left right cell>

Upvotes: 0

jmore009
jmore009

Reputation: 12923

your css class names are wrong, they should be .leftYH, .rightYH, .cellYH you had lower case h's

UPDATE

You also need to apply width:50% only to your .left class, and you were missing a . for cellYH

Check out the example below

css

.tablecontainer{
    width:100%
}
.left, .right{
    margin-bottom: 1px;
    padding-right: 5px;
    padding-left: 5px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center;
}
.left{
    width: 50%;
    float: left;
}
.cell{
    width: 100%;
    margin-bottom: 1px;
    border: 1px;
    border-style: solid;
    border-color: white;
    text-align: center; 
}
.left a, .right a, .cell a{
    text-decoration: none;
    color: #fff;
    font-size: 1em;
}
.leftYH, .rightYH, .cellYH{
    background-color: #660066;
}

JSFIDDLE

Upvotes: 2

user908853
user908853

Reputation:

Change line 37 to .leftYH, .rightYH, .cellYH (lower case H and missing . before cellYH).

Upvotes: 0

Related Questions