CODEWITHSUNDEEP
cssinheritance
Free Bud
Free Bud

Reputation: 766

CSS class inheritance

Can I create "class inheritance" in CSS? Something like: 

.squareButton {width:20px; height:20px; margin:1px solid;}
.squareRedButton {.squareButton; background:red;}

Upvotes: 0

Views: 70

Answers (2)

Anwar
Anwar

Reputation: 4246

Yes you can, just apply the desired CSS to both the class you need :

.squareButton, .squareRedButton {
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.squareRedButton { 
    background : red;
}

Note

You can pass through HTML to use several classes to perform an inheritance like following :

CSS

.squareButton {
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.squareRedButton {
    background:red;
}

HTML

<button class="squareButton squareRedButton">MyButton</button>

Upvotes: 2

Sameera Thilakasiri
Sameera Thilakasiri

Reputation: 9508

.squareButton{
    width : 20px; 
    height : 20px; 
    margin : 1px solid;
}

.bg-red { 
    background : red;
}


<div class="squareButton bg-red">

This is the short code way of doing.

Upvotes: 0

Related Questions