title: Dynamically change nth-child number
body: <pre><code> ngx-datatable &gt; div &gt; datatable-body &gt; datatable-selection:hover &gt; datatable-scroller &gt; datatable-row-wrapper:nth-child(n) &gt; datatable-body-row &gt; div.datatable-row-center.datatable-row-group &gt; datatable-body-cell:nth-child(1) {
      background-color: #E9F1FA !important;
    }
  </code></pre>
  
  <p>This is my long selector. I am trying to highlight the entire column based on the user hovering over an item on a column. This works great, except that it only highlights whatever nth-child I am using on the last <code>datatable-body-cell:nth-child(1)</code> I can change it to any number and it works, but it isn't dynamic. I want it to only select the column that is being hovered over. I've tried <code>datatable-body-cell:nth-child(n):hover</code> and <code>datatable-body-cell:hover</code> and a lot of different varieties but it either highlights the whole table, or nothing at all, unless I specify the nth-child. 
  Is there a way I can dynamically change the nth-child based on the what child the user is hovering over (with CSS or Javascript)?
  Any help would be appreciated!</p>