What if I want to change the styles of child components in Angular 2? Is that even possible? Well, yes.

Angular 2's deep selector allows a parent component to alter its children's CSS.

1
2
3
4
5
<parent>
	<child></child>
	<child2></child2>
	<child3></child3>
</parent>

1
2
3
/deep/ .padding {
	padding: 15px;
}

If I add the CSS snippet above to the parent component, I can change all elements with the class padding in the three child components.

This becomes useful when you need to alter the CSS of a component you can't edit. In my case, I had to change the colors of a component in a library that I had imported through NPM. It would be irrational to dig into the node_modules folder and change the CSS of the component itself. I had to find a way to alter the library through my own code.

It's important to note that this selector can only be used with emulated view encapsulation. Unfortunately, view encapsulation is turned off in Ionic 2. So the deep selector cannot be used for now.