Target specific element style by Id or Class inside angular material 2 element using CSS

Question

I am having an EntryComponent that has a material button menu. When I try to override the default style by using ::ng-deep the styling changes for all the button component in the parent Component as well.

 <style>
 ::ng-deep .mat-button{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
 }
 ::ng-deep .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
 }
 </style>

I also tried to target styling using a class but it doesn't work like usual CSS I guess.

 <style>
 .actions ::ng-deep .mat-button{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
 }

 .actions ::ng-deep .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
 }
 </style>

Please share your experience or knowledge.

Entry Component

<button md-button [mdMenuTriggerFor]="menu" class="actions">
<md-icon>flash_on</md-icon></button>
<md-menu #menu="mdMenu">

  <button md-menu-item>
    <md-icon>autorenew</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>border_color</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>delete</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>perm_identity</md-icon>
  </button>

  <button md-menu-item>
   <md-icon>payment</md-icon>
  </button>
</md-menu>

PS: this is not a duplicate issue as mentioned as we are able to style material elements globally but the question was how to style a targeted dom element by means of Id or Class. Hope this clears the confusion

Answer 1

As already answered by Milad just needed to use this styling

<style>
:host /deep/ .actions{
  max-width: 50px !important;
  min-width: 45px !important;
  height: 5em;
}

:host /deep/ .actions .mat-button-ripple mat-ripple{
  max-width: 40px !important;
  min-width: 20px !important;
}
</style>