Override CSS of child component

Question

<div class="app-component">
   <child class="test">{{name}}</child>
</div>

and my CSS styles in child class

.{
   text-align:center;
}

and i did override in parent component i.e in app component as

:host /deep/ .test{
       text-align:right;
        color: red;
     }

so in this code only "color:red" is working fine , but "text-align:right", which i want to override , is not working

Any help is appreciated i want to override the values of predefined Css and add some css also...adding CSS is working but modifying the CSS value is not working

Answer 1

:host /deep/ .test{
       text-align:right !important; 
        color: red;
     }

worked for me..

any other solution?