Skip Parent Background in Child class while inherit other properties - css

Question

I don't want child class to inherit the immediate parent class background color which has background color as white. Instead it should skip and take background color from parent component which is bluebackground. When I use the transparent background in child class it should show blue color not white. Rest of the property of parent (whitebackground class) should be inherited just not the white background in child class.
I cannot do any changes on Parent component just I can do changes using css.
app component :
<div class="bluebackground">
<app-test>
</app-test>
</div>
Component: test
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
Here is the Css
.child {
font-size: 2rem;
text-align: center;
color: green;
background:transparent;
}
.bluebackground{
background: blue;
font-size: 3rem;
}
.whitebackground {
background:white;
}
StackBlitz
https://stackblitz.com/edit/angular-ivy-hbfvjs

Answer 1

You could try to change the CSS to the following
.child {
font-size: 2rem;
text-align: center;
}
.bluebackground {
font-size: 3rem;
}
.whitebackground {
background:white;
color:yellow;
}
.bluebackground, .child {
background-color: blue;
}
Working example: Stackblitz
Update
There is a dirty way to include the CSS selectors from the app component to the child component.
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css', '../app.component.css'] // <-- include `app.component.css` here
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
Now you could use the bluebackground selector in the test component.
test.component.html
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground"> <!-- include `bluebackground` here -->
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
I've modified your Stackblitz
Update: encapsulation
You could set the encapsulation to ViewEncapsulation.None in the app.component and rename the child selector to bluebackground in the child as well. Try the following
app.component.ts
import { Component, ViewEncapsulation } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
encapsulation: ViewEncapsulation.None // <-- set `ViewEncapsulation.None` here
})
export class AppComponent {
...
}
test.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
test.component.css
/* overwrite/introduce values to the `bluebackground` specific to test component */
.bluebackground {
font-size: 2rem;
text-align: center;
}
.whitebackground {
background:white;
color:yellow;
}
test.component.html
BlueBackGround Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="bluebackground">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
Working example: Stackblitz

Answer 2

Try like this:
<div class="bluebackground">
Blue Background Start
<div class="whitebackground">
Some White Background Stuff that I need
<div class="child bluebackground">
Here i want background which should skip the parent whitebackground and show blue color same as mainbackground class <br />
</div>
</div>
Blue Background End
<div>
Working Demo

Answer 3

Thanks to Michael D for his inputs.
This is how I solved it
I had to move the white background color from whitebackground class to new class called newwhitebackground class.
Html
BlueBackGround Start
<div class="whitebackground">
<div class="newwhitebackground">
Some White Background Stuff that I need
</div>
<div class="child">
Here i want background which should skip the parent whitebackground and show blue color same as bluebackground class <br />
</div>
</div>
BlueBackGround End
CSS
.child {
font-size: 2rem;
text-align: center;
background:transparent;
}
.whitebackground {
color:yellow;
}
.newwhitebackground {
background-color:white;
}
Here is the stackblitz
https://stackblitz.com/edit/angular-ivy-pyhqwr