title: Change css of HTML element from typescript/javascript
body: <p>I am using star rating widget in one of my HTML forms in my React JS application.
  I am referring this widget <a href="https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html" rel="nofollow noreferrer">https://www.everythingfrontend.com/posts/star-rating-input-pure-css.html.</a>
  When user clicks rating from one of five star, the user information gets saved to server.</p>
  
  <p>The stars remain selected when user clicks on any star.
  I want to reset the stars back to unselected when the response comes back from server for user's next action.</p>
  
  <p>I dont know how to do that using Typescript/Javascript.
  I tried changing it like below :</p>
  
  <pre><code>    let ratingElement = document.querySelectorAll("#ratingField &gt;  label");
      if (ratingElement.length &gt; 0) {
        for (let i = 0; i &lt; ratingElement.length; i++) {
          ratingElement[i].style.color = "#ddd";
        }
      }
  </code></pre>
  
  <p>Using the above code, the color gets reset. But there are other properties in CSS like <code>hover</code>,<code>checked</code>,<code>unchecked</code> on the widget.
  How to add those properties to reset the stars same like its initial stage?</p>
  
  <p>Below is my CSS for the widget:</p>
  
  <pre><code>.rating {
    border: none;
    float: left;
  }
  
  .rating &gt; input {
    display: none;
  }
  .rating &gt; label:before {
    margin: 5px;
    font-size: 25px;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
  }
  
  .rating &gt; label {
    color: #ddd;
    float: right;
  }
  
  .rating &gt; input:checked ~ label, /* show gold star when clicked */
  .rating:not(:checked) &gt; label:hover, /* hover current star */
  .rating:not(:checked) &gt; label:hover ~ label {
    color: #ffd700;
  } /* hover previous stars in list */
  
  .rating &gt; input:checked + label:hover, /* hover current star when changing rating */
  .rating &gt; input:checked ~ label:hover,
  .rating &gt; label:hover ~ input:checked ~ label, /* lighten current selection */
  .rating &gt; input:checked ~ label:hover ~ label {
    color: #ffed85;
  }
  </code></pre>
  
  <p>And my HTML code is like :</p>
  
  <pre><code>&lt;fieldset
      className="rating"
      style={{ marginLeft: 5, marginRight: 5 }}
      id="ratingField"
  &gt;
      &lt;input type="radio" id="star5" name="rating" value="5" /&gt;
      &lt;label
          onClick={() =&gt; this.shortlist(5)}
          className="full"
          htmlFor="star5"
          title="Awesome"
      /&gt;
      &lt;input type="radio" id="star4" name="rating" value="4" /&gt;
      &lt;label
          onClick={() =&gt; this.shortlist(4)}
          className="full"
          htmlFor="star4"
          title="Pretty good"
      /&gt;
      &lt;input type="radio" id="star3" name="rating" value="3" /&gt;
      &lt;label
          onClick={() =&gt; this.shortlist(3)}
          className="full"
          htmlFor="star3"
          title="Average"
      /&gt;
      &lt;input type="radio" id="star2" name="rating" value="2" /&gt;
      &lt;label
          onClick={() =&gt; this.shortlist(2)}
          className="full"
          htmlFor="star2"
          title="Kinda bad"
      /&gt;
      &lt;input type="radio" id="star1" name="rating" value="1" /&gt;
      &lt;label
          onClick={() =&gt; this.shortlist(1)}
          className="full"
          htmlFor="star1"
          title="Worst"
      /&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>Can anyone help?</p>