Is there a way to trigger two changes by clicking on a single tag?

I've been experimenting with HTML and CSS to create a simple board game without using JavaScript. I use labels and radio buttons to create the different states and simulate the logic for each piece to move around the board.

It works "fine", although the usability is not great. For example, after rolling the dice, the token moves and I show a button to switch to the next user (again controlled with a label and a checkbox)... but that's not ideal, it would be better if the player switch was will perform "automatically."

The problem is that <label>it can only change one element and I don't know how to make two "actions" (or side effects) be generated with each click.

Is there a way to launch two "state changes" by clicking on a single <label>or <a>?

This is a minimal example of the problem: There are two players (specified by turns), a board with 3 spaces (which will be 6 radio buttons: 1 per space and player), and two buttons to change turns (although only one will be visible). If you click on change turn, it will change the turn, and the radio buttons and labels for the other player will be shown. (A more complete example can be found here ).

Is the problem that you have to force the user to click on the button to change turns, or the active player will always be the same. Is there a way to make it so that when you click on a square, not only the square changes but also the turn?

#j1:checked ~ [for=j1],
#j1:checked ~ [for^=casilla-j2],
#j1:checked ~ [name^=casilla-j2],
#j2:checked ~ [for=j2],
#j2:checked ~ [for^=casilla-j1],
#j2:checked ~ [name^=casilla-j1]
{ 
  display: none; 
}

/* aquí habría más reglas para ocultar elementos */

<h1>Turno:</h1>
<input type="radio" id="j1" name="jugador" checked /> J1
<input type="radio" id="j2" name="jugador" /> J2

<h1>Tablero: </h1>
Jugador 1:
<input type="radio" id="casilla-j1-1" name="casilla-j1" checked />
<label for="casilla-j1-1">J1 a 1</label>
<input type="radio" id="casilla-j1-2" name="casilla-j1" />
<label for="casilla-j1-2">J1 a 2</label>
<input type="radio" id="casilla-j1-3" name="casilla-j1" />
<label for="casilla-j1-3">J1 a 3</label>
<br/>
Jugador 2:
<input type="radio" id="casilla-j2-1" name="casilla-j2" checked />
<label for="casilla-j2-1">J2 a 1</label>
<input type="radio" id="casilla-j2-2" name="casilla-j2" />
<label for="casilla-j2-2">J2 a 2</label>
<input type="radio" id="casilla-j2-3" name="casilla-j2" />
<label for="casilla-j2-3">J2 a 3</label>

<h1>Cambio de turno:</h1>
<label for="j2">Cambiar turno a jugador 2</label>
<label for="j1">Cambiar turno a jugador 1</label>

Some attempts:

I tried to put a <a>inside a <label>to be able to cast two readable changes: :targetwith <a>and :checkedwith <label>(with :target it would control the turn, and with :checked it would control the square the piece goes to). It looks like that structure is valid HTML (at least according to the W3C HTML validator), but it doesn't work . For example, in the following snippet, clicking on the first link activates the text, clicking on the second link checks the box, but clicking on the third link does not do both (which is what I I would want):

#test:target {
  color: red;
}

#cb:checked

a, label {
  display: block;
  text-decoration: underline;
  color: blue;
}

<input type="checkbox" id="cb" />
<div id="test">TEST</div>

<a href="#test">Resaltar texto</a>
<label for="cb">Marcar casilla</label>
<label for="cb">
  <a href="#test">Resaltar texto Y marcar casilla</a>
</label>

I've also tried playing with combinations of different pseudo-classes: :checkede :invalidin particular. Although it was not very helpful because in the case of a checkbox they have the same value at the same time, and in the tests I did requiredit does not apply to a single radio button:

div {
  color: purple;
}

#radio1:checked ~ div {
  color: blue;
}

#radio1:invalid ~ div {
  color: red;
}

#radio2:checked ~ div {
  color: fuchsia;
}

#radio1:invalid + #radio2:checked ~ div {
  color: green;
}

<input type="radio" name="radio1" id="radio1" required />
<input type="radio" name="radio1" id="radio2" />

<div>Texto que debería ser verde cuando radio2 esté pulsado</div>