Open In App

Can a CSS class inherit one or more other classes ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how a class can inherit properties of other classes using CSS, along with understanding their basic implementations through the illustration. A descendent class can inherit any CSS property from the parent class by using Inheritance. Inheritance is the process by which genetic information is transmitted from parents to their children. For this, the members of the same families tend to have similar kinds of characteristics. A child of any element will inherit the properties of their parents, although, there are some limits that exist for the child element to inherit the properties. Inheritance controls the child’s properties if no properties are specified for the child.

Approach: The class can inherit the properties of more than one class in the following ways:

  • We can apply the same class properties to different DOM (Document model object) objects at the same time, or by implementing more than one class with HTML at once. 
  • By inheriting each property of parent to children.

Approach 1: Here, we have used 2 classes with <div> element, and in styling, we applied the same properties to item1, item2, and item3, so we don’t have to write the same properties repeatedly for different classes.

Example: In this example, we will see how we can use multiple classes in a single line of HTML code and can assign the same properties to different classes.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .box {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            min-height: 10rem;
        }
  
        .item1,.item2,.item3 {
            font-family: sans-serif;
            font-weight: bolder;
            letter-spacing: 0.1rem;
            line-height: 3rem;
            border: 8px black double;
        }
  
        h1 {
            color: green;
            text-align: center;
        }
  
        .item2 {
            background-color: orange;
        }
  
        .item3 {
            background-color: yellowgreen;
        }
  
        .item1 {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <div class="box">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
  
</html>


Output:

 

In the “inherit” property of CSS, one object will inherit properties of its immediate parent, if the specified property is not found in its immediate parent, accordingly then DOM will look for the property to its upper parent. If the specified property is found in any of the immediate parents, then the class will inherit that property and if not then the properties defined by the browser will be applicable. Please refer to the CSS Value Inherit article for further details.

Approach 2: Here, the parent and child relationships are like this “box<-item1<-item2<-item3”. The box is a parent of item 1, item 2, and item 3. Item1 is a parent of item2, item3, and so on. If we define inherit any property in item3, it will first look for it in item2 & if the property is not found again, it will look in item2, is still not found then item1, and so on. From the output, item1, item2, and item3 inherit the border property to their immediate parent “box” and font-family & font-weight from its upper level which is the body of the HTML.

Example: In this example, we will see how children of any object can inherit the properties of their parents. 

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        body {
            font-family: sans-serif;
            font-weight: bolder;
        }
  
        .box {
            display: flex;
            flex: 1;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            min-height: 10rem;
            border: 8px black double;
        }
  
        .item1, .item2, .item3 {
            font-family: inherit;
            font-weight: inherit;
            letter-spacing: 0.1rem;
            line-height: 3rem;
            border: inherit;
        }
  
        .h1 {
            color: green;
        }
  
        .item2 {
            background-color: orange;
        }
  
        .item3 {
            background-color: yellowgreen;
        }
  
        .item1 {
            background-color: green;
        }
    </style>
</head>
  
<body>
    <h1 style="color:green;
               text-align: center;">
               GeeksforGeeks
    </h1>
    <div class="box">
        <div class=" item1">Item 1
            <div class=" item2">Item 2
                <div class=" item3">Item 3</div>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

 



Last Updated : 29 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads