<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<table>
  <thead>
    <tr>
      <th>Version</th>
      <th>Release Date</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.0</td>
      <td>03.01.2004</td>
      <td>Miles Davis</td>
    </tr>
    <tr>
      <td>2.0</td>
      <td>26.12.2005</td>
      <td>Duke Ellington</td>
    </tr>
    <!--<tr>
      <td>3.0</td>
      <td>17.06.2010</td>
      <td>Thelonious Monk</td>
    </tr>
    <tr>
      <td>4.0</td>
      <td>04.09.2014</td>
      <td>Benny Goodman</td>
    </tr>
    <tr>
      <td>5.0</td>
      <td>06.12.2018</td>
      <td>Bebo Valdés</td>
    </tr>
    <tr>
      <td>6.0</td>
      <td>24.05.2022</td>
      <td>Arturo</td>
    </tr>-->
  </tbody>
</table>
<hr>
<div class="rating">
  <label>
    <input type="radio" name="rating">
    <i class="fa-solid fa-star"></i>
  </label>
  <label>
    <input type="radio" name="rating">
    <i class="fa-solid fa-star"></i>
  </label>
  <label>
    <input type="radio" name="rating">
    <i class="fa-solid fa-star"></i>
  </label>
  <label>
    <input type="radio" name="rating">
    <i class="fa-solid fa-star"></i>
  </label>
  <label>
    <input type="radio" name="rating">
    <i class="fa-solid fa-star"></i>
  </label>
</div>

/* START TABLE */
thead > tr {
  background: #21759b;
  color: white;
}

tbody:has(> tr:nth-child(5)) > tr:nth-child(even) { 
  background: lightblue;
}

td, th {
  padding: 10px 20px;
  text-align: center;
}

/* END TABLE */

hr {
  margin: 50px 0;
}

/* START RATING */
.rating input {
  display: none;
}

.rating label {
  color: lightblue;
  cursor: pointer;
}

.rating label:is(:hover, :has(~ label:hover)),
.rating label:has(input:checked, ~ label input:checked) {
  color: #21759b;
}

.rating label:hover ~ label:has(input:checked, ~ label input:checked) {
  color: lightgrey;
}
/* END RATING */