CSS te permite definir si se va a aplicar un estilo o no, dependiendo del
estado de un checkbox . Se hace a través de la pseudo-clase :checked, la cual sirve para validar
si el checkbox está en true o en false.
Esto da muchísimas posibilidades a la hora de maquetar un sitio, por ejemplo, crear un menú responsivo sin utilizar JavaScript o lo que se te ocurra.
Ahora, imagina que dependiendo del estado del checkbox quieres que el background del siguiente elemento sea azul o verde.
Click me!
¿Azul o verde?
El CSS necesario para lograrlo es el siguiente.
div.conditional {
color: white;
background: blue;
text-align: center;
padding: 10px;
margin-top: 10px;
}
input:checked + div {
background: green;
}