@@Chinamann:

nuqneH

<input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="" title=""></label>

Fehler: Inhalt für alt-Attribut fehlt. Für Nutzer, die das Bild 1.png nicht sehen können, ist das Label leer.

Das title-Attribut ist eher sinnlos. (Es sei denn für alte IEs, die sonst den Inhalt des alt-Attribut fälschlicherweise als Tooltip anzeigen würden.)

Also:

<input type="checkbox" id="select-1"/><label for="select-1"><img src="1.png" alt="1"></label>  

Für alle anderen Bilder entsprechend.

<input type="checkbox" id="select-1"/><label for="select-1"><img src="3.png" alt="" title=""></label>

Fehler: IDs dürfen in einem Dokument nur jeweils einmal vorkommen. Du willst vermutlich damit auch gar nicht die 1. Kategorie schalten, sondern die 3.:

<input type="checkbox" id="select-3"/><label for="select-3"><img src="3.png" alt="3"></label>  

BTW, die Klassen sollten natürlich am Ende nicht select-[123] und category-[123] heißen, sondern sinnvoll benannt sein.

.select-1 :not(.category-1),
.select-2 :not(.category-2),
.select-3 :not(.category-3)
{
opacity: 0.5;
}

Das funktionierte in meinem Bespiel, weil meine li keine Kindelemente hatten. Bei dir wirken diese Selektoren auch auf alle a- und img-Kindelemente, da diese auch nicht den Klassen .category-[123] angehören. Deshalb werden die Elemente immer transparenter.

Die Selektoren sollten nur auf die li wirken:

.select-1 li:not(.category-1),  
.select-2 li:not(.category-2),  
.select-3 li:not(.category-3)  
{  
    opacity: 0.5;  
}

Ich hab das in meinen Beispielen mal geändert.

Qapla'