title: How to override Angular2 tree component CSS
body: <p>I am working on an angular2 project and in that I am using a third party component, Angular2-tree-component. In that component JS file, they are using color coding of highlighting a particular node with X color code.
  I want to modify it with Y color code but unable to do so.
  In orginal JS file below is the line of code:</p>
  
  <blockquote>
    <p>.tree-node-focused > .node-wrapper > .node-content-wrapper { background: #e7f4f9 }</p>
  </blockquote>
  
  <p>I am trying to override this color coding to some other code for below html code:</p>
  
  <blockquote>
  <pre><code>  &lt;p-panel header="Schema"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12"&gt;
          &lt;Tree #tree [nodes]="LHSNodes" [focused]="true" [options]="optionsForLHS" (onInitialized)="getLHSTree(tree.treeModel)"&gt;
            &lt;template #treeNodeTemplate let-node &gt;
              &lt;span&gt;
                &lt;input type="checkbox" name="node.data.selected" value="{{node.data.selected}}" (click)= "onCheckBoxClick($event, node, 'LHS')" [(ngModel)]="node.data.selected"&gt;
             &lt;label *ngIf="!node.data.isEdit"&gt;{{node.data.documentUri}}&lt;/label&gt; 
              &lt;input *ngIf="node.data.isEdit" id="node.data.documentUri" value="{{node.data.documentUri}}" [(ngModel)]="node.data.documentUri" type="text" size="10" pInputText (keyup.enter)="updateName(node)" /&gt;
             &lt;/span&gt;
            &lt;/template&gt;
          &lt;/Tree&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/p-panel&gt;
  </code></pre>
  </blockquote>
  
  <p>I am not understanding what should I write in my css file because same line of code is not working with updated value.
  Let me know if it needs more clarification.</p>