CSS :checked Sözde Sınıfı

Bu sözde sınıf ile tipi checkbox ya da radio olan input etiketlerinin seçili olup olmadıklarına göre stil işlemi uygulayabiliyoruz. Ancak bunu kendi başına kullanmak çok mantıklı olmuyor genelde (+) Bitişik Kardeş Seçicisi ile birlikte kullanılıyor.

Örneğin şöyle bir HTML yapımız olsun;

<label>
    <input type="checkbox">
    <span>Kuralları okudum kabul ediyorum</span>
</label>

checked işlemi olduktan sonra, input etiketinden sonra gelen span etiketine stil işlemi uygulayalım.

input:checked + span {
    background-color: lime;
}

Sonuç ise şöyle olacaktır;

Farklı olarak, input etiketinden sonra gelen etiketi ya da etiketleri gizleyip göstermek içinde kullanabiliriz. Örneğin;

<label for="input1">
    Gizle/Göster
</label>
<input type="checkbox" id="input1">
<div class="box">
    burası gizlenip gözükecek alanım
</div>

CSS kodlarım ise şöyle olacak;

.box, input {
    display: none;
}
input:checked + .box {
    display: block;
}

Sonuç ise;