Seeking assistance for an Angular application, but the query also pertains to CSS principles in general.
In my Angular project, I have a main component containing several child components, all with standard view encapsulation. Specifically, I am looking to adjust the line-height of all p tags within the parent and child components to a different value.
I have found a solution using SCSS as shown below:
:host {
::ng-deep {
p {
line-height: 2em;
}
}
}
However, I wish to exclude a specific child component - let's name it foobar. My attempt is demonstrated here:
:host {
::ng-deep {
:not(foobar) {
p {
line-height: 2em;
}
}
}
}
It appears this does not work as expected due to other elements possibly containing the p tag as descendants.
An alternative approach could be:
:host {
::ng-deep {
p:not(foobar p) {
line-height: 2em;
}
}
}
Nevertheless, managing multiple overrides for various elements or classes can become cumbersome with this method.
Hence, my question remains; is there a more efficient or modern way to achieve this using SCSS or updated selectors? Are there any Angular features that could assist in this scenario (aside from disabling viewEncapsulation)?