title: CSS - change the color of a text dynamically
body: <p>I am new to <code>CSS</code> and <code>AngularJs</code>. I am using text-angular in which I am showing a html file.In that based upon some rules I have some words from that html which needs to be highlighted. I have previous and next click functionality where when I click next it auto-focus the next word and highlight it. So, I want to highlight all the words every-time . But only the word which is now in focus should be in a different color.My code is -</p>
  
  <pre><code>mark, .mark {
      background-color: #FFEB3B;
      padding: .2em;
  }
  $scope.highlight_AutoFocusOrphan = function() {
      uploadService.getDocumentAsHTML($scope.documentType, uploadService.currentFileName)
          .then(function(data) {
              $rootScope.data.htmlDocument = $scope.highlightHTML(data, $scope.orphanData.orphanText);
              $timeout(function() {
                  $scope.editorScope = textAngularManager.retrieveEditor('editor1').scope;
                  var element = $scope.editorScope.displayElements.text;
                  if (element != null) {
                      element[0].querySelector('.mark').focus();
                      angular.forEach(uploadService.getOrphans(), function(orphan) {
                          //if (first_iteration) {
                          $rootScope.data.htmlDocument = $scope.highlightHTML($rootScope.data.htmlDocument, orphan.attributes.text);
                          first_iteration = false;
                          // }
                      });
                  }
              });
          }, function(error) {
              $scope.errorMessage = error.status + " : " + error.statusText;
              toastr.error($scope.errorMessage, 'Error : ' + error.status);
              if (error.status === 401) {
                  loginService.authenticationError();
              }
          })
          .finally(function() {
              $scope.fetchingDocumentAsHTML = false;
          });
  };
  $scope.highlightHTML = function(content, text, className, notByWordBoundry) {
      var RegExpEscapeText, str;
      if (!(content &amp;&amp; content.replace)) {
          return '';
      }
      if (!text) {
          return $sce.trustAsHtml(content);
      }
      if (!className) {
          className = 'mark';
      }
      RegExpEscapeText = text.replace(/[.?*+^$[\]\\(){}|-]/g, "\\$&amp;");
      if (!notByWordBoundry) {
          str = new RegExp('(\\b)' + RegExpEscapeText + '(\\b)', 'gi');
      } else {
          str = new RegExp(RegExpEscapeText, 'gi');
      }
      return content.replace(str, '&lt;span tabindex="1" class="' + className + '"&gt;$&amp;&lt;/span&gt;');
  };
  </code></pre>
  
  <p>I have tried Different solutions.But I was not able to resolve it.Thanks in advance.</p>