app.component.html:

```
<div class="container">
   <router-outlet></router-outlet>
</div>

```

child1.componet.html:

```
<div class="panel panel-primary ">
  <div class="panel-heading">
........
</div>
</div>

```

child1.component.ts

```
@Component({
  selector: 'tb-child1',
  templateUrl: './child1.component.html',
  styleUrls: ['./child1.component.css']
})

```

app.component.css:

```
.container{
width:1200px
}

```

I want the container width should be 1500px for only child1. Is there any way to change that?.
['https://Stackoverflow.com/questions/47974629', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/3968098/']
I can override the parent class in Child's css class by disabling the view encapsulaion like below in my child component 

```
 encapsulation: ViewEncapsulation.None

```
Please try like this

**app.component.html:**

```
<div class="container subclass">
   <router-outlet></router-outlet>
</div>

```

In your **child1.component.css** add the below code

```
.container.subclass {width: 1500px !important;}

```