El selector de la pseudo-class :checked representa (permite seleccionar) a cualquier elemento HTML radio (<input type="radio">), checkbox (<input type="checkbox">) u option (<option> en un <select>): Fuente.

En otras palabras, podemos obtener cualquiera de los elementos HTML anteriormente citados que se encuentren "encendidos" con esta pseudo-class:

<input type = "checkbox" checked>
<input type = "radio" checked>
<option value="1" selected>option</option>

El selector checked es ideal para cambiar de estilo a las checkbox que son las casillas de verificación en los formularios de una manera sencilla sin emplear JavaScript y que funcionan muy bien al emplear las transiciones para los cambios de un estado a otro como hemos visto en otros tutoriales en los que hablamos de las transiciones en CSS:

Una vez obtenidos los elementos, es posible definir un nuevo estilo en los mismos, sus hijos, elementos HTML vecinos, etc; por ejemplo, en el caso de un formulario, podemos definir un estilo para el label hermano o adyacente al checkbox al cual se le a encendido:

input[type="checkbox"]:checked + label { 

}

Y por supuesto, puedes crear tus propias transiciones y de esta forma potenciar el aspecto visual sin emplear una línea de JavaScript de una manera muy sencilla.

El atributo for para activar elementos HTML

Existe un atributo que puede ser empleado en conjunto con los <label> llamado for que permite activar los elementos HTML checkboxs y radios con tan solo aplicar un clic en el label sin la necesidad de emplear JavaScript.

Realiza clics sobre los siguientes labels:

Cómo ves, es muy fácil emplear la pseudo selector CSS3 :checked para seleccionar uno o más elementos basándonos en si está o no seleccionado y potenciarlo con otros selectores, como el selector de hermandad +

Uso del atributo for en CSS

Para habilitar esta función solo debemos colocar el mismo valor del atributo id de los checkboxs y/o radios en el for del label.

Ejemplo del atributo for en CSS

<input id="arya-stark" type="checkbox" >
<label for="arya-stark">Arya Stark</label>

Dando estilo a los elementos encendidos mediante la pseudo-class :checked

Usando como base el HTML presentado anteriormente, es posible seleccionar los input que se encuentren encendidos con la siguiente selector:

input:checked{}

O el label adyacente al input "encendido":

input:checked + label{}

Dando estilo a los checkboxs y radios encendidos mediante la pseudo-class :checked

Aplicar una regla de estilo al label cuando el input de tipo checkbox se encuentra "encendido" (<input type = "checkbox" checked >) es tan sencillo como aplicar el siguiente selector:

input:checked + label{ color: #FFFFFF;}

Y en el caso de los elementos radios:

input:checked + label{ color: #FFFFFF;}

¿:unchecked con CSS?

En realidad no existe dicho selector, que por el nombre puedes imaginarte que sería el negado del selector anterior, es decir, cuando no está encendido o presionado el elemento, el que está de-seleccionado; para esto lo que puedes hacer es emplear el CSS base del elemento:

input[type="checkbox"] {
  // Unchecked Estilo
}
input[type="checkbox"]:checked {
  // Checked Estilo
}

O una versión equivalente de lo anterior:

input[type="checkbox"]:not(:checked) {
  // Unchecked Estilo
}

Aunque es agregar más ruido pero también es otra opción.