CODEWITHSUNDEEP
cssinheritance
geoff
geoff

Reputation: 2276

inherit only one property in css

Let's say we have this:

.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}

In .second-class, Is it possible to only inherit one property from first-class, say, background, while leaving the other properties as default?

Upvotes: 0

Views: 221

Answers (1)

Nitesh
Nitesh

Reputation: 15749

No. You have to reset them. .first-class being the parent of .second-class will take its inheritance.

Here is the WORKING EXAMPLE to illustrate your scenario before reset.

Now when you reset it.

Find the below code before and after reset.

Before reset:

The HTML:

<div class="first-class">
    <div class="second-class">abcd</div>
</div>

The CSS:

.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
/* code goes here */
}

After Reset:

The HTML:

<div class="first-class">
    <div class="second-class">abcd</div>
</div>

The CSS:

.first-class {
background: purple;
font-weight: bold;
color: white;
}
.first-class > .second-class {
background: inherit;
font-weight:normal;
color:black;
}

Upvotes: 1

Related Questions