Css failed to set green color on hover on the first row, while it's working on the last row aft-CodePudding

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 < tr > but not the last one.

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.

$(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 >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) && $.isNumeric(val2))
          return sortOrder == 1 ? val1 - val2 : val2 - val1;
        else
          return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
      });
      $.each(arrData, function(index, row) {
        $('tbody').append(row);
      });
    });
  });
});

* {
  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;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <th>HOMETOWN</th>
    <th>SOCIALS</th>
    <th>DESCRIPTION</th>
  </tr>
  <tr>
    <td>$520</td>
    <td>easy/medium</td>
    <td>okay</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
  <tr>
    <td>WORTH</td>
    <td>DIFFICULTY</td>
    <td>NAME</td>
  </tr>
</table>

CodePudding user response：

It looks as though the javascript isn't affecting it (but I'll check this).

On a table the first row is the one containing the headings (i.e. the th tags). The css rule that's styling the th elements is overriding the table tr:first-child:hover rule because the th elements appear on top of the tr element. If you remove the table th rule, the change of colour on the top row works. If you want the row that has $520 in the first column to change colour on hover then use the nth-child(2) pseudo class.

The rules tagged 'THIS IS WHAT DOESN'T WORK' and 'AS WELL AS THIS' don't work because the nth-child(odd) and nth-child(even) rules appear after these two rules and in css the last rule 'wins'. If you move these rules after the nth-child(odd) and (even) rules then it works.

It's worthwhile reading up on specificity. There's a good article here and a good video on it by Kevin Powell here (Kevin's channel is brilliant btw and well worth a follow). But yeah, specificity is one of those things that drives developers mad (especially newbies)!

Hope this helps

P.S. there were a number of typos in your CSS too such as missing semicolons etc.

P.P.S my changes below:

<!DOCTYPE html>
<html lang="en">
<html>

<head>
  <meta charset="UTF-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="jquery-3.6.0.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    * {
      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;
    }

    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 WHAT DOESN'T WORK - moved this to below table:tr:nth*/
      table tr:nth-child(2) {
        background-color: #0CDC80;
        color: white;
      }

      /* AS WELL AS THIS - moved this to below table:tr:nth */
      table tr:last-child {
        background-color: #DA0F3A;
        color: white;
      }

      table tr:hover {
        background-color: rgba(0, 0, 0, .01);
        font-weight: 900;
      }

      /* THIS IS EXACTLY WHAT I NEED - changed this from first-child to nth-child(2)*/
      table tr:nth-child(2):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);
      }
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <th>HOMETOWN</th>
      <th>SOCIALS</th>
      <th>DESCRIPTION</th>
    </tr>
    <tr>
      <td>$520</td>
      <td>easy/medium</td>
      <td>okay</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>
    <tr>
      <td>WORTH</td>
      <td>DIFFICULTY</td>
      <td>NAME</td>
    </tr>

  </table>

  <script>
    /* POSSIBLE ORIGIN OF PROBLEM */

    $(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 >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) && $.isNumeric(val2))
              return sortOrder == 1 ? val1 - val2 : val2 - val1;
            else
              return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
          });
          $.each(arrData, function (index, row) {
            $('tbody').append(row);
          });
        });
      });
    });
  </script>
</body>

</html>