Teoría
Teoría

Control de elementos con ~ y :checked

Con la pseudoclase :checked podemos crear muchos efectos interesantes usando solo CSS. Además de seleccionar los controles marcados, podemos cambiar el aspecto de otros elementos a partir de su estado.

Para ello combinamos :checked con ~, que permite seleccionar elementos hermanos situados después del control marcado. Por ejemplo:

input:checked ~ .item {
  color: red;
}

Esta regla asigna el color rojo a todos los elementos con la clase item que son hermanos del campo marcado y aparecen después de él.

Así podemos controlar el aspecto de otros elementos mediante casillas o botones de opción. Esta técnica sirve, por ejemplo, para crear pestañas que funcionan sin JavaScript.

Veamos un ejemplo más sencillo: usaremos casillas para mostrar a determinados gatos.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <title>Control de elementos con ~ y :checked</title> <meta charset="utf-8"> <link rel="stylesheet" href="course.css"> <link rel="stylesheet" href="cat-boxes.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header class="page-header">Control de elementos con ~ y :checked</header> <main> <div class="boxes"> <input id="father" type="checkbox"> <label for="father">Primer gato</label> <input id="rudolf" type="checkbox"> <label for="rudolf">Segundo gato</label> <input id="snow" type="checkbox"> <label for="snow">Tercer gato</label> <br> <div class="cat-in-box" title="Papá de Cupcake"> <img src="cat_fat.png"> <p>Papá de Cupcake</p> </div> <div class="cat-in-box" title="Amigo Rodolfo"> <img src="cat_clean.png"> <p>Amigo Rodolfo</p> </div> <div class="cat-in-box" title="Amigo Copito"> <img src="cat_rascal.png"> <p>Amigo Copito</p> </div> </div> </main> <footer class="page-footer"></footer> </body> </html>

CSS

#father:checked ~ .cat-in-box[title^="Papá"]::before { } #rudolf:checked ~ .cat-in-box[title$="Rodolfo"]::before { } #snow:checked ~ .cat-in-box[title$="Copito"]::before { } .boxes { margin-top: 100px; } .boxes label { margin-right: 15px; }

ObjetivosRealizado

Añade display: none; a la regla CSS que comienza con #father:checked y marca la primera casilla.
Añade display: none; a la regla CSS que comienza con #rudolf:checked y marca la segunda casilla.
Añade display: none; a la regla CSS que comienza con #snow:checked y marca la tercera casilla.

Marca y desmarca las casillas para ver cómo aparecen y desaparecen los gatos.