title: How to change label color with html and CSS without js?
body: <p>I am using checkbox type coding and I would like to make it so that for specific options, I am able to click it and it turns blue, and for other options, I can click it and it will turn red or green. I have found a way to do this, as shown in the CSS, but I figured I would have to keep writing code for each type of label. So I was wondering if there was a much more efficient way of doing this? Thanks. Here is the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="checkbox"] {
   display: none;
  }
  
  label {
   cursor: pointer;
   color: #555;
   display: block;
   padding: 10px;
   margin: 3px;
  }
  
  input[type="checkbox"]:checked + label {
   color: #ffffff;
   font-weight: bold;
      background: blue;
  }
  
  input[type="checkbox"]:checked + label[for=red1] {
   color: #ffffff;
   font-weight: bold;
      background: red;
  }
  
  input[type="checkbox"]:checked + label[for=red2] {
   color: #ffffff;
   font-weight: bold;
      background: red;
  }
  
  input[type="checkbox"]:checked + label[for=green1] {
   color: #ffffff;
   font-weight: bold;
      background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;input id="blue1" type="checkbox" /&gt;&lt;label for="blue1"&gt;1 blue&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="blue2" type="checkbox" /&gt;&lt;label for="blue2"&gt;2 blue&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="blue3" type="checkbox" /&gt;&lt;label for="blue3"&gt;3 blue&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="blue4" type="checkbox" /&gt;&lt;label for="blue4"&gt;4 blue&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="red1" type="checkbox" /&gt;&lt;label for="red1"&gt;1 red&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="red2" type="checkbox" /&gt;&lt;label for="red2"&gt;2 red&lt;/label&gt;&lt;/div&gt;
  &lt;div&gt;&lt;input id="green1" type="checkbox" /&gt;&lt;label for="green1"&gt;1 green&lt;/label&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>