How to Apply CSS to Parent Using Child Selector - With CSS or Angular 2

Angular2 selector tag breaks css parent/child relationship

CSS styling a child element from a parent element using selectors

You can use :nth-child() property of CSS! Try below-given code. I'm also attaching the link for working CodePen. To understand how it works you can play with it!

Visit the pen for more understanding and live demo: https://codepen.io/CUManiar/pen/vqGdze

.grand-parent {  color: blue;}
.grand-parent h2:nth-child(4) {  color: red;}
.grand-parent .parent p:nth-child(2) {  color: pink}

<div class="grand-parent">   Hi I am grandparent.     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am grand child. </p>          <p class="child"> Hi I am 2nd grand child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 2nd child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 3rd child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 4th child. </p>     </h2>     <h2 class="parent">        Hi I am parent.          <p class="child"> Hi I am 5th child. </p>     </h2></div>

How to style child components from parent component's CSS file?

Update - Newest Way

Don't do it, if you can avoid it. As Devon Sans points out in the comments: This feature will most likely be deprecated.

Last Update

From Angular 4.3.0 till even now (Angular 12.x), all piercing css combinators were deprecated. Angular team introduced a new combinator ::ng-deep as shown below,

DEMO : https://plnkr.co/edit/RBJIszu14o4svHLQt563?p=preview

styles: [
    `
     :host { color: red; }
     
     :host ::ng-deep parent {
       color:blue;
     }
     :host ::ng-deep child{
       color:orange;
     }
     :host ::ng-deep child.class1 {
       color:yellow;
     }
     :host ::ng-deep child.class2{
       color:pink;
     }
    `
],



template: `
      Angular2                                //red
      <parent>                                //blue
          <child></child>                     //orange
          <child class="class1"></child>      //yellow
          <child class="class2"></child>      //pink
      </parent>      
    `

Old way

You can use encapsulation mode and/or piercing CSS combinators >>>, /deep/ and ::shadow

working example : http://plnkr.co/edit/1RBDGQ?p=preview

styles: [
    `
     :host { color: red; }
     :host >>> parent {
       color:blue;
     }
     :host >>> child{
       color:orange;
     }
     :host >>> child.class1 {
       color:yellow;
     }
     :host >>> child.class2{
       color:pink;
     }
    `
    ],

template: `
  Angular2                                //red
  <parent>                                //blue
      <child></child>                     //orange
      <child class="class1"></child>      //yellow
      <child class="class2"></child>      //pink
  </parent>      
`

How to use parent component's class in a child css selector

In Angular this is called "view encapsulation" where the JavaScript, CSS styles, and HTML templates are all managed by Angular. There are a lot of advantages to this approach as it allows you to easily tree-shake a project and drop components that are not being used. You not only drop the Javascript code, but all the styles and HTML with it.

When it's turned on the styles are injected into the DOM as embedded styles. Angular keeps track of what styles are required on the document and adds or removes styles as needed. These styles can have strange names at run-time like those in your question.

You need to read up on the https://angular.io/guide/component-styles styles guide to see how to define a :host style. This is the style assigned to a component when view encapsulation is turned on. When using :host you can refer to the parent selector using a :host-context path, and you can also style inside other child components using the ::ng-deep selectors.

Keep in mind. This is all optional. It's turned on by default, but if you don't want to use it. You can turn it off.

You can change the view encapsulation mode when you define your component. To disable this feature just change the encapsulation option to native.

See the guide:

https://angular.io/guide/component-styles#view-encapsulation

Child style applying to parent component in Angular 2?

This should do what you want

:host .nav li a {
  padding: 5px 10px;
}

This way you are limiting the scope of your styles to your child component.

With ViewEncapsulation.None this doesn't work of course because this is about style encapsulation and None disables exactly this.

How to inherit css styles in child component from parent in Angular 5

Why make things complex?

Ideal way to do would be to add refrence of parent css file in child component as well.

 @Component({
    selector: 'child-app',
    templateUrl: `./child.component.html`,
    styleUrls:['./parent/parent.component.css', './child.component.css']
})
export class ChildComponent { }