title: Css failed to set green color on hover on the first row, while it's working on the last row after adding my Javascript code
body: <p>My Css code was working just fine, until I added my Javascript code, which works as a sorter for the table itself, the Javascript code seems to change my Css code (the green color when on hover on the first row and the last one) for the first row &lt; tr &gt; but not the last one.</p>
  <p>In the code I used Css and Javascript comments to explain the origin of the problem and what could be fixed, I think it originates from the Javascript code. All I want is for the first row to be green when clicked on or hovered on and also the last one.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('th').each(function(col) {
      $(this).hover(
        function() {
          $(this).addClass('focus');
        },
        function() {
          $(this).removeClass('focus');
        }
      );
      $(this).click(function() {
        if ($(this).is('.asc')) {
          $(this).removeClass('asc');
          $(this).addClass('desc selected');
          sortOrder = -1;
        } else {
          $(this).addClass('asc selected');
          $(this).removeClass('desc');
          sortOrder = 1;
        }
        $(this).siblings().removeClass('asc selected');
        $(this).siblings().removeClass('desc selected');
        var arrData = $('table').find('tbody &gt;tr:has(td)').get();
        arrData.sort(function(a, b) {
          var val1 = $(a).children('td').eq(col).text().toUpperCase();
          var val2 = $(b).children('td').eq(col).text().toUpperCase();
          if ($.isNumeric(val1) &amp;&amp; $.isNumeric(val2))
            return sortOrder == 1 ? val1 - val2 : val2 - val1;
          else
            return (val1 &lt; val2) ? -sortOrder : (val1 &gt; val2) ? sortOrder : 0;
        });
        $.each(arrData, function(index, row) {
          $('tbody').append(row);
        });
      });
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
    z-index: 0;
    list-style: none;
    box-sizing: border-box;
    text-align: center: vertical-align: center;
    transition: .4s;
  }
  
  body {
    color: white;
    margin: 0;
    width: 100%;
    background: #212121;
    text-align: center: vertical-align: center;
    height: 120em;
  }
  
  
  /* CSS OF TABLE */
  
  table {
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    position: absolute;
    top: 10em;
    border-collapse: collapse;
    text-align: center: z-index: 1000;
    font-size: 0.8125em;
  }
  
  table td,
  table th {
    border: solid;
    border-width: 0 .001em .001em .001em;
    border-color: black;
    padding: .1em .3em .1em .3em;
    text-align: center;
  }
  
  table tr:nth-child(odd) {
    background-color: #f6f6f8;
  }
  
  table tr:nth-child(even) {
    background-color: #CACCD6;
  }
  
  
  /* THIS IS WHAT DOESN'T WORK */
  
  table tr:first-child {
    background-color: #0CDC80;
    color: white;
  }
  
  
  /* AS WELL AS THIS */
  
  table tr:last-child {
    background-color: #DA0F3A;
    color: white;
  }
  
  table tr:hover {
    background-color: #676B77;
    color: white;
    font-weight: 900;
  }
  
  table th {
    padding: .5em;
    text-align: center;
    background-color: #6C06D8;
    color: #f6f6f8;
    text-transform: uppercase;
    font-weight: 900;
  }
  
  @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
    table tr:nth-child(odd) {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, .1);
    }
    table tr:nth-child(even) {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba(255, 255, 255, .2);
    }
    /* THIS IS EXACTLY WHAT I NEED */
    table tr:first-child:hover {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba(12, 220, 128, .6);
    }
    /* THIS IS ALREADY WORKING NO IDEA WHY */
    table tr:last-child:hover {
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      background-color: rgba(218, 15, 58, .6);
    }
    table tr:hover {
      background-color: rgba(0, 0, 0, .01);
      font-weight: 900;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
    &lt;tr&gt;
      &lt;th&gt;HOMETOWN&lt;/th&gt;
      &lt;th&gt;SOCIALS&lt;/th&gt;
      &lt;th&gt;DESCRIPTION&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;$520&lt;/td&gt;
      &lt;td&gt;easy/medium&lt;/td&gt;
      &lt;td&gt;okay&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;WORTH&lt;/td&gt;
      &lt;td&gt;DIFFICULTY&lt;/td&gt;
      &lt;td&gt;NAME&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>