title: Is there any way to trigger two changes by clicking on just one label?
body: <p>I have been playing with HTML and CSS to create a simple 2-player board game without using any JavaScript. I use labels, radio buttons, and checkboxes to create different states and mimic some logic so the piece will move around the board.</p>
  
  <p>It works "fine", although the usability is not great. For example, after clicking on the dice, the tile moves, and I display a button to change to the next player (controlled again with a label and a checkbox)... which is not great, it would be better if it changed player "automatically."</p>
  
  <p>The problem is that the <code>&lt;label&gt;</code> can only target one element, and I don't know how to trigger two "actions" (or side-effects) with only one click.</p>
  
  <p>The following code is an <a href="/help/mcve">mcve</a> to better visualize the problem: there are two players (specified by turns), a board with three tiles (represented by 6 radio buttons: 1 per player and tile), and two buttons to change player turn (only one visible). If you click on the turn change button, the turn will go to the next player. (A more complex example can be found <a href="https://codepen.io/alvaromontoro/pen/zLNdZQ" rel="noreferrer">here</a>)</p>
  
  <p>The problem is that the users are forced to press the button to change turn, otherwise the same player will always be active. Is there a way to make so that when a label is clicked on, not only the the tile gets activated, but also the turn is changed? Or in its absence, is there an alternative to achieve this? (without using JS)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#p1:checked ~ [for=p1],
  #p1:checked ~ [for^=tile-p2],
  #p1:checked ~ [name^=tile-p2],
  #p2:checked ~ [for=p2],
  #p2:checked ~ [for^=tile-p1],
  #p2:checked ~ [name^=tile-p1]
  { 
    display: none; 
  }
  
  /* more rules to hide/show more elements */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Players:&lt;/h1&gt;
  &lt;input type="radio" id="p1" name="player" checked /&gt; P1
  &lt;input type="radio" id="p2" name="player" /&gt; P2
  
  &lt;h1&gt;Board: &lt;/h1&gt;
  Player 1:
  &lt;input type="radio" id="tile-p1-1" name="tile-p1" checked /&gt;
  &lt;label for="tile-p1-1"&gt;P1 to 1&lt;/label&gt;
  &lt;input type="radio" id="tile-p1-2" name="tile-p1" /&gt;
  &lt;label for="tile-p1-2"&gt;P1 to 2&lt;/label&gt;
  &lt;input type="radio" id="tile-p1-3" name="tile-p1" /&gt;
  &lt;label for="tile-p1-3"&gt;P1 to 3&lt;/label&gt;
  &lt;br/&gt;
  Player 2:
  &lt;input type="radio" id="tile-p2-1" name="tile-p2" checked /&gt;
  &lt;label for="tile-p2-1"&gt;P2 to 1&lt;/label&gt;
  &lt;input type="radio" id="tile-p2-2" name="tile-p2" /&gt;
  &lt;label for="tile-p2-2"&gt;P2 to 2&lt;/label&gt;
  &lt;input type="radio" id="tile-p2-3" name="tile-p2" /&gt;
  &lt;label for="tile-p2-3"&gt;P2 to 3&lt;/label&gt;
  
  &lt;h1&gt;Change of turn:&lt;/h1&gt;
  &lt;label for="p2"&gt;Change to Player 2&lt;/label&gt;
  &lt;label for="p1"&gt;Change to Player 1&lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there any way to trigger two "state changes" by clicking on just one <code>&lt;label&gt;</code> or <code>&lt;a&gt;</code>? </p>
  
  <hr>
  
  <p>Some attempts at solving this:</p>
  
  <p>I tried putting an <code>&lt;a&gt;</code> inside a <code>&lt;label&gt;</code> to be able to trigger two readable changes: <code>:target</code> and <code>:checked</code> (with the :target I would control the player's turn, and with the :checked it would be the piece position). It seems to be valid HTML (at least according to the W3C validator), but <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Accessibility_concerns" rel="noreferrer">it doesn't really work</a>. For example, in the next snippet, clicking on the first link will highlight the text, clicking on the second will mark the box, and (I hoped) clicking on the third would do both... but it doesn't:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#test:target {
    color: red;
  }
  
  #cb:checked
  
  a, label {
    display: block;
    text-decoration: underline;
    color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="checkbox" id="cb" /&gt;
  &lt;div id="test"&gt;TEST&lt;/div&gt;
  
  &lt;a href="#test"&gt;Highlight test&lt;/a&gt;
  &lt;label for="cb"&gt;Check the box&lt;/label&gt;
  &lt;label for="cb"&gt;
    &lt;a href="#test"&gt;Highlight test AND check the box&lt;/a&gt;
  &lt;/label&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I also tried playing with different pseudo-classes: <code>:checked</code> and <code>:invalid</code>. It didn't do much for a checkbox, as they both would apply at the same time, and from my tests, <code>required</code> doesn't apply to a single radio (but I may be doing something wrong):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    color: purple;
  }
  
  #radio1:checked ~ div {
    color: blue;
  }
  
  #radio2:checked ~ div {
    color: fuchsia;
  }
  
  #radio1:invalid ~ div {
    color: red;
  }
  
  #radio1:invalid + #radio2:checked ~ div {
    color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="radio" name="radio1" id="radio1" required /&gt;
  &lt;input type="radio" name="radio1" id="radio2" /&gt;
  
  &lt;div&gt;Text to be green if radio2 is checked&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>