Change style specific element

Question

I have three UI-grids in my screen (page and partial view). In a specific grid i need to add a class to wordwrap a specific column.

I set the slyle like bellow:

<style>
    .wordwrap .ui-grid-viewport .ui-grid-cell-contents {
      word-wrap: break-word;
      white-space: normal !important;
    }

    .wordwrap .ui-grid-row, .ui-grid-cell {
      height: auto !important;
      background-color: red !important;
    }

    .wordwrap .ui-grid-row div[role=row] {
      display: flex ;
      align-content: stretch;
    }

</style>

<div id="Log-Similaridade-App" ng-app="logSimilaridadeApp" ng-controller="logSimilaridadeCtrl">
    <div class="modal-body">
        <div id="grd-Resultado" ui-grid="grdResultado" class="wordwrap" ui-grid-move-columns ui-grid-auto-resize></div>
    </div>
</div>

But all of my grids, including those that do not have the defined class are be changing the style.

What can I do to set the style for the specific grid?