CODEWITHSUNDEEP
htmlcssinheritance
URL87
URL87

Reputation: 11012

Inherit class within the CSS

Suppose in the CSS there are two classes - fatherDiv and childDiv - 

.fatherDiv {
    /*
        With background and no special font color 
        */
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv {

    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

And want .childDiv to inherit all .fatherDiv style and add more .

The common way is to do - 

<div class="fatherDiv childDiv">I'm the Child</div>

But my question is -

Does it have an option to inherit class style to another class within the CSS file ?

I tried -

style.css -

.fatherDiv .childDiv {
    /*
          Inherit from .fatherDiv ...  
            */
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

index.html - 

<div class="childDiv">I'm the Child</div>

Here is its jsFiddle

But it discard the interitance .

Upvotes: 0

Views: 67

Answers (3)

Ian Devlin
Ian Devlin

Reputation: 18870

Something like:

.fatherDiv {
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv {
    background-color:inherit;
    width:100%;
    height:100%;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

would work in theory as long as your HTML is like:

<div class="fatherDiv">
   <div class="childDiv"></div>
</div>

although inherit isn't valid on all CSS values so you would have to check that.

It won't automatically inherit the values, you would need a pre-processor like Sass to be able to do that.

Upvotes: 1

Chetan Gawai
Chetan Gawai

Reputation: 2401

Check this -http://jsfiddle.net/9rhDd/7/

 .fatherDiv,.childDiv {
    /*
        With background and no special font color 
        */
    background-color:#b0c4de;
    width:350px;
    height:280px;
    /*font-size:50px;*/
}

Upvotes: 2

Nico O
Nico O

Reputation: 14102

You can do this:

.fatherDiv, .childDiv {
    background-color: #b0c4de;
    width: 350px;
    height: 280px;
}

.childDiv
{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 50px;
}

http://jsfiddle.net/NicoO/9rhDd/6/

You may also do not call these elements child and father. They are siblings.

Upvotes: 2

Related Questions