My website consists of three main pages and multiple child pages. Each child page inherits its style from the parent CSS.
country.routes.ts
...
path: '',
children: [
{
path: '/country',
component: CountryComponent,
data: {
cssClass: 'country',
},
},
{
path: ':countryId/city',
component: CityComponent ,
data: {
cssClass: 'country-city',
},
},
{
path: ':countryId/fact',
component: FactComponent,
data: {
cssClass: 'country-fact',
},
},
...
The CSS class is added to a div just below the app-root, as shown below:
index.html (just rough html representation)
<app-root>
<div clas="country/country-fact/country-city">
<header></header>
<div>
<route-outlet>
<main>
<!-- content -->
</main>
</route-outlet>
</div>
<footer></footer>
</div>
</app-root>
In the main.scss (global styles)
country {
background-color:red;
}
country-city {
background-color:blue;
}
.country-fact {
background-color: purple;
}
Since this website is built using Angular, I utilized view encapsulation by declaring the styles in the component decorator:
country.component.ts
@component({
...
styles: ['
:host-context(.country) main{
background-color:red;
','
:host-context(.country) header{
display:none;
}
'],
country-city.component.ts
@component({
...
styles: ['
:host-context(.country-city) main{
background-color:blue;
'],
country-fact.component.ts
@component({
...
styles: ['
:host-context(.country) main{
background-color:purple;
'],
Based on my reading and tutorials:
I came across a tutorial that explained how to modify the parent's CSS using ':host' or ':host-context(.selector) .change-selector'. However, it did not mention the possibility of using these selectors at the body or app-root level.
I experimented with nested `
:host` or `:host{ :host-context()}, but both attempts failed.</p>
<p>Another <a href="https://blog.angular-university.io/angular-host-context/" rel="nofollow noreferrer">article</a> mentioned selecting at the body level using the pseudo-class, but I could not get it to work. While researching, I found information suggesting that <code>:host-context:host but with a selector, limiting it to selecting only the parent's class and not extending to the body level.