v2.5.2
Giriş yap

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;

Not: Sonucu görmek için input etiketini seçin.

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;

burası gizlenip gözükecek alanım
Not: Sonucu görmek için Gizle/Göster düğmesine tıklayın.
tayfunerbilen
1413 gün önce yazdı - 4048 kez görüntülendi.
Önceki :nth-last-of-type Sonraki :empty