If you're looking to make some changes to the CSS styling, consider updating it as shown below:
.child {
font-size: 2rem;
text-align: center;
}
.bluebackground {
font-size: 3rem;
}
.whitebackground {
background:white;
color:yellow;
}
.bluebackground, .child {
background-color: blue;
}
See a live example here: Stackblitz
Update
There's a slightly unconventional method to bring in 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 can utilize 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 as per the bluebackground class <br />
</div>
</div>
BlueBackGround End
I've made adjustments to your Stackblitz
Update: encapsulation
You have the option to set the encapsulation to ViewEncapsulation.None in the app.component and rename the child selector to bluebackground in the child component as well. Take a look at this approach:
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 specific to the `bluebackground` in the 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 the background to override the parent whitebackground and display blue as defined in the bluebackground class <br />
</div>
</div>
BlueBackGround End
Check out the updated example here: Stackblitz