17

He estado haciendo pruebas con HTML y CSS para crear un juego de mesa simple sin utilizar JavaScript. Uso labels y radio buttons para crear los diferentes estados y simular la lógica para que cada ficha se mueva por el tablero.

Funciona "bien", aunque la usabilidad no es genial. Por ejemplo, después de tirar el dado, la ficha se mueve y muestro un botón para cambiar al siguiente usuario (controlado de nuevo con un label y un checkbox)... pero eso no es ideal, sería mejor si el cambio de jugador se realizara "automáticamente."

El problema es que <label> sólo puede cambiar un elemento y no sé cómo hacer que se generen dos "acciones" (o efectos colaterales) con cada click.

¿Hay alguna manera de lanzar dos "cambios de estado" pulsando en un único <label> o <a>?


Esto es un ejemplo mínimo del problema: Hay dos jugadores (especificado por turnos), un tablero con 3 casillas (que serán 6 radio buttons: 1 por casilla y jugador), y dos botones para cambiar turno (aunque sólo habrá uno visible). Si se pulsa en cambiar turno, cambiará el turno, y se mostrarán los radio buttons y labels para el otro jugador. (Un ejemplo más completo puede encontrarse aquí).

¿El problema es que hay que forzar que el usuario pulse en el botón de cambiar de turno, o el jugador activo siempre será el mismo. Hay alguna manera de hacer que cuando se pulse en una casilla no sólo cambie la casilla sino también el turno?

#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>


Algunos intentos:

Probé a a poner un <a> dentro de un <label> para poder lanzar dos cambios legibles: :target con el <a> y :checked con el <label> (con el :target controlaría el turno, y con el :checked controlaría la casilla a la que va la pieza). Parece que esa estructura es HTML válido (al menos según el validador de HTML del W3C), pero no funciona. Por ejemplo, en el siguiente snippet, si se pulsa en el primer enlace se activa el texto, si se pulsa en el segundo enlace se marca la casilla, pero si se pulsa en el tercer enlace no ocurren ambas cosas (que es lo que yo querría):

#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>

También probé jugando con combinaciones de diferentes pseudo-clases: :checked e :invalid en particular. Aunque no fue de mucha ayuda porque en el caso de un checkbox tienen el mismo valor al mismo tiempo, y en las pruebas que hice required no aplica a un solo 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>

1

2 respuestas 2

10
+500

Los eventos de CSS funcionan de manera muy específica, por lo tanto un evento solo disparará una acción, lamentablemente. Intentar disparar una segunda solo sobreescribiría la primera, o no funcionaría simplemente. Sin embargo, puedes utilizar 2 eventos de CSS enlazados a un mismo label, aprovechando los selectores (:hover, :focus, :active, etc). Por supuesto, cada selector tiene un comportamiento diferente.

#test:target {
  color: red;
}

#cb:checked + #test{
    color: green
}

#cb:focus ~ a{
    color: purple
}

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">Resaltar texto Y marcar casilla</label>

En cuanto a tu segundo ejemplo, el selector :invalid no parecía funcionar, sin embargo el selector :required cumple con lo que buscas (tomando en cuenta que Radio1 tenga el atributo requerido)

div {
  color: purple;
}

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

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

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

#radio1:required + #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>

Creo que utilizando checkBox:focus junto a checkBox:checked podrías alcanzar el efecto deseado, aunque estaría algo bugueado. Como última opción, podrías utilizar una dualidad entre :checked y :not(:checked). Cuando alguien apriete "Dice" en realidad estaría seleccionando o deseleccionando tu checkbox de jugador, y cada vez que cambie el valor del checkbox, se active el dado

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

#radio2:not(:checked) ~ div {
  color: green;
}
<label for="radio2">Hey</label>
<input type="checkbox" name="radio2" id="radio2" />

<div>Texto de prueba</div>

EDITADO (02 DE AGOSTO DE 2018):

Le he estado dando bastantes vueltas al asunto, y luego de investigar mucho, simplemente me di cuenta de que con CSS puro es imposible hacer que el cambio de un input afecte el valor de otro (no digo que eso es lo que esperabas, pero ciertamente la finalidad me confundia un poco). Entiendo que al hacer clic en el "dado" cambias el sitio del jugador seleccionado a través de una animación, y que al "cambiar" el turno, pues seleccionas cual de las fichas se moverá. Ahora bien, no se que tan posible será controlar todo con un único checkbox y utilizar ID y Clases para realizar cambios diferentes de acuerdo al valor del checkbox.

#cb:checked ~ #xx {
background-color: red
}

#cb:not(:checked) ~ #xx {
background-color: green
}

.cbcb:checked ~ #yy {
background-color: blue
}

.cbcb:not(:checked) ~ #yy {
background-color: green
}
<label for="cb">HOLA!</label>
<input type="checkbox" id="cb" class="cbcb"/>

<div id="xx" style="height: 200px; width: 200px;"></div>
<div id="yy" style="height: 200px; width: 200px;"></div>

Se que pediste aplicarlo al primer ejemplo, pero no logre aplicarlo con radios y checkbox al mismo tiempo, por eso pregunto si se puede cambiar la estructura

3
  • 1
    Buen intento con :required (no lo había probado antes). El problema con el primer ejemplo es que los selectores #radio2:checked ~ div y #radio1:required + #radio2:checked ~ div son equivalentes (porque, :required es siempre cierto, a diferencia de :invalid que podría ser cierto o no, por lo que el segundo selector se aplicará siempre al ser más específico). Probé lo de :focus y :checked pero :focus sólo está activo por un momento (mientras el ratón está pulsado).
    – Alvaro Montoro
    el 31 jul. 2018 a las 20:07
  • 1
    El último ejemplo lo consideré, pero me encuentro con el problema de no saber cuándo se marcó el checkbox (¿fue en este turno o en el anterior? ¿cómo controlar esa temporalidad?). ¿Podría aplicarse de alguna manera al código primero de la pregunta? Ese es el que estoy utilizando (y el más parecido al codepen).
    – Alvaro Montoro
    el 31 jul. 2018 a las 20:08
  • 1
    No es 100% lo que buscaba, pero me abrió los ojos a otras posibilidades y caminos a intentar. Gracias por la ayuda :)
    – Alvaro Montoro
    el 6 ago. 2018 a las 11:50
2

Puedes usar el selector ~, por lo tanto si el checkbox esta seleccionado, le aplicas color rojo la div #test.

No es precisamente que un evento esta ejecutando las dos acciones a la vez, sino que un evento acciona la selección del checkbox y luego al ser seleccionado la otra regla de css le aplica el color rojo al otro div, a fines prácticos puede que sea lo que estas queriendo lograr.

Aqui un ejemplo:

#test:target {
  color: red;
}

#cb:checked ~ #test {
  color: red;
}

a, label {
  display: block;
  text-decoration: underline;
  color: blue;
}
<input type="checkbox" id="cb" />
<div id="test">TEST</div>

<label for="cb">Resaltar texto Y marcar casilla</label>

Espero que te haya sigo de ayuda.

Saludos!

1
  • 1
    Esto realmente sólo crea un cambio de estado (el del checkbox) que es mi situación actual. Por ejemplo (simplificado), el dado es un label que activa la casilla de destino (que es un radio button como el resto de casillas, porque sólo puede haber una activa). Pero que se active la casilla de destino no genera un cambio en el botón porque ya se estaba en una casilla. Necesitaría un cambio de estado adicional que indique que el turno ha cambiado de jugador. Voy a editar la pregunta para añadir un ejemplo más específico.
    – Alvaro Montoro
    el 25 jul. 2018 a las 20:05

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.