title: Applying CSS class to all rows but not the table heading
body: <p>I am trying to apply a css style to change color of clicked rows of an HTML table. On the click event, I am adding the class (selected-row). Now, my table has a sorting functionality when clicking on the heading of each column. The heading gets colored which is not what I want. I want only rows but not the heading. So, I changed my style to (not first child). Now, the heading AND first row don't get color changed. I need only the heading to NOT change color and all other rows to change color when I add selected-row class. </p>
  
  <pre><code>.selected-row:not(:first-child) {
      background-color: brown;
      color: #FFF;
  }
  
              $("#example tr").click(function () {
                  $(this).addClass('selected-row').siblings().removeClass('selected-row');
  
  
              });
  </code></pre>