Durum Seçicileri

Bu dersin sonunda elemanların fareye, klavyeye ve form durumlarına tepki vermesini sağlayabileceksiniz.

Durum nedir?

Bir eleman her zaman aynı hâlde değildir. Üzerine fare gelebilir, klavyeyle seçilebilir, bir onay kutusu işaretlenebilir. Bu hâllere durum denir. style niteliğinin yapamadığı en önemli şey buydu.

Durum seçicileri tek iki nokta ile başlar ve bir seçicinin sonuna eklenir: a:hover

:hover, :active ve :focus

• :hover Fare elemanın üzerindeyken.
• :active Elemana basılırken.
• :focus Eleman klavyeyle veya tıklamayla seçiliyken.

Farenizi düğmenin üzerine getirin ve basılı tutun. Ardından kutunun içine tıklayıp Tab tuşuyla gezin.

<button class="dugme">Üzerime gelin</button>
<input class="kutu" type="text" placeholder="Buraya tıklayın">

.dugme {
  padding: 8px 16px;
  border: 0;
  border-radius: 6px;
  background-color: teal;
  color: white;
  cursor: pointer;
}

.dugme:hover {
  background-color: darkslategray;
}

.dugme:active {
  background-color: black;
}

.kutu {
  padding: 8px;
  border: 2px solid lightgray;
}

.kutu:focus {
  border-color: teal;
  outline: none;
}

Dokunmatik ekranlarda fare olmadığı için :hover güvenilir değildir. Önemli bir bilgiyi veya işlevi yalnızca :hover ile göstermeyin.

:focus-visible: Klavye kullananlar için

Klavyeyle gezenler nerede olduklarını görmek zorundadır. Tarayıcıların çizdiği odak çerçevesini kaldıracaksanız yerine mutlaka başka bir görünüm koymalısınız.

:focus-visible, tarayıcı odağın gösterilmesi gerektiğini düşündüğünde çalışır. Tıpkı burada olduğu gibi: Fareyle tıklayınca çerçeve çıkmaz, Tab tuşuyla gelince çıkar.

<button class="dugme">Fareyle tıklayın, sonra Tab'a basın</button>
<button class="dugme">İkinci düğme</button>

.dugme {
  padding: 8px 16px;
}

.dugme:focus-visible {
  outline: 3px solid crimson;
  outline-offset: 2px;
}

Bağlantı durumları

Bağlantıların iki durumu daha vardır:

• :link Henüz ziyaret edilmemiş bağlantı.
• :visited Ziyaret edilmiş bağlantı.

Dört durumu birlikte yazıyorsanız sıra önemlidir, çünkü özgüllükleri eşittir: :link, :visited, :hover, :active

a:link {
  color: teal;
}

a:visited {
  color: purple;
}

a:hover {
  color: crimson;
}

a:active {
  color: black;
}

Gizlilik nedeniyle :visited ile yalnızca renkle ilgili özellikler değiştirilebilir. Aksi hâlde bir site, ziyaret ettiğiniz sayfaları öğrenebilirdi.

Form durumları

Form alanlarının kendi durumları vardır:

• :checked İşaretlenmiş onay kutusu veya seçenek.
• :disabled Devre dışı alan.
• :required Zorunlu alan.
• :valid ve :invalid Değeri kurallara uyan veya uymayan alan.
• :placeholder-shown Boş olduğu için örnek metni görünen alan.

Form Doğrulama dersinde hata baloncuklarını önizlemede göremediğinizi hatırlıyor olabilirsiniz. Durum seçicileri ise form gönderilmeden çalışır, bu yüzden burada denenebilir:

<p>
  <input type="email" required placeholder="E-posta yazın">
</p>
<p>
  <input type="checkbox" id="kosul">
  <label for="kosul">Koşulları okudum</label>
</p>
<p>
  <input type="text" disabled value="Değiştirilemez">
</p>

input:invalid {
  border: 2px solid crimson;
}

input:valid {
  border: 2px solid teal;
}

input:checked + label {
  font-weight: bold;
  color: teal;
}

input:disabled {
  background-color: lightgray;
}

input:checked + label kuralı Seçicileri Birleştirmek dersinde gördüğünüz kardeş seçicisini durumla birleştirir: “İşaretli bir kutudan hemen sonra gelen etiket.”

Burada :invalid alan daha hiç yazılmadan kırmızıdır, çünkü zorunlu alan boştur. Bunu önlemek için kurala bir koşul daha eklenebilir: input:not(:placeholder-shown):invalid. :not seçicisini bir sonraki derste göreceksiniz.

:focus-within: İçinde odak olan

Bir elemanın içindeki herhangi bir eleman odaklandığında dıştaki elemana stil verir.

<div class="alan">
  <label for="ad">Adınız</label>
  <input id="ad" type="text">
</div>

.alan {
  padding: 12px;
  border: 1px solid lightgray;
}

.alan:focus-within {
  border-color: teal;
  background-color: azure;
}

<style>
  .dugme {
    background-color: teal;
    color: white;
  }

  .dugme:hover {
    background-color: crimson;
  }
</style>

<button class="dugme">Kaydet</button>

<style>
  input:checked + label {
    font-weight: bold;
  }
</style>

<input type="checkbox" id="onay">
<label for="onay">Onaylıyorum</label>

Bu derste öğrendikleriniz

• Durum seçicileri tek iki nokta ile yazılır ve seçiciye bitişik eklenir.
• :hover, :active, :focus ve :focus-visible kullanıcı etkileşimine tepki verir.
• Bağlantı durumları :link, :visited, :hover, :active sırasıyla yazılır.
• :checked, :disabled, :valid ve :invalid form alanlarının durumunu seçer.