title: Changing the color of a <select> depending on its value - CSS only(?)
body: <p>I have an HTML select element with some options inside:</p>
  
  <pre><code>&lt;select class = "myRed" id="mySelect" onchange="onSelectChange()"&gt;
      &lt;option selected value="0"&gt;0&lt;/option&gt;
      &lt;option value="1"&gt;1&lt;/option&gt;
      &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I would like the text color of the select object to be red when its value is 0, black otherwise. I could be able to do this through JavaScript: </p>
  
  <pre><code>function onSelectChange(){
      if (document.getElementById('mySelect').value == 0){
          document.getElementById('mySelect').className = 'myRed';
      } else {
          document.getElementById('mySelect').className = 'myBlack'
      }
  }
  </code></pre>
  
  <p>where</p>
  
  <pre><code>.myRed{color:red;}
  </code></pre>
  
  <p>and</p>
  
  <pre><code>.myBlack{color:black;}
  </code></pre>
  
  <p>However, I've been told this is somehow reachable through CSS only, without using JavaScript. I cannot think about any other way than using JS. Could anyone please advise? </p>