Yükleniyor...

CSS Pseudo-sınıflar

Etiket, class, id ve öznitelik seçicilerini zaten biliyorsunuz. Bir katman kaldı: bazen her zaman aynı görünümü istemezsiniz; imleç düğmenin üzerindeyken, Tab ile alana gelindiğinde veya bağlantı daha önce açıldığında değişim istersiniz. Bunun için pseudo-sınıf vardır — HTML’de yeni class olmadan.

Pseudo-sınıf ne demek?

Pseudo-sınıf, seçiciye tek iki nokta (:) ile yapışan bir sözcüktür. HTML’de class="hover" gibi bir şey görmezsiniz. Tarayıcı koşul doğruysa kuralı açar: imleç üstte, odak, bağlantı geçmişi veya ebeveynin çocukları arasındaki yer.

Sık kullanılan pseudo-sınıflar

Önce bunlarla başlayın. Daha çok ad var ama UI başlangıcı için çoğu zaman yeter.

📊 Günlük CSS pseudo-sınıfları

Pseudo-sınıf Ne zaman etkin Örnek
:hover İmleç öğenin üzerinde a:hover
:focus Öğede odak var (klavye veya tık) input:focus
:visited Bağlantı daha önce ziyaret edildi (gizlilik sınırlarıyla) a:visited
:first-child Öğe ebeveyninin ilk çocuğu li:first-child
:nth-child(n) n’inci çocuk veya tek/çift tr:nth-child(odd)
:disabled Form denetimi kapalı button:disabled

Hover — :hover

:hover ile görünüm, imleç öğenin üzerindeyken değişir. Düğme ve bağlantılar küçük bir değişiklikle canlı durur — düzen sıçraması olmadan.

Hover — düğme geri bildirimi

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Hover notu

Değişimi yumuşak tutun. Dokunmatikte gerçek hover azdır; gerekli bilgiyi yalnız :hover içine koymayın.

Odak — :focus

:focus şu an etkin öğeyi alır — örneğin Tab ile geldiniz. Net odak halkası yoksa klavye kullanıcısı formda kaybolur.

Odak — input’ta net halka

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Hover ve odak ikisi de gerekli

Hover imleç içindir. Odak «şimdi bu denetim etkin» demektir. Sonuna outline’ı aynı netlikte bir yedek olmadan kaldırmayın.

Ziyaret edilmiş bağlantılar — :visited

:visited, tarayıcının daha önce açıldığını sandığı bağlantıları boyar. Genelde yalnızca renk (ve az özellik). Padding veya düzene güvenmeyin — gizlilik sınırlar.

Ziyaret — yumuşak bağlantı rengi

css
CSS Code 
a:visited {
color: #6b21a8;
}

Bağlantı durumlarının sırası

Birkaç durumu birlikte yazarsanız güvenli yaygın sıra: link → visited → hover → focus (bazen LVHA). Böylece ziyaret edilmiş bağlantılarda da hover/odak görünür kalır.

İlk çocuk — :first-child

:first-child, öğenin ebeveyninin ilk çocuğu olduğu anlamına gelir — «sayfanın herhangi yerindeki ilk li» değil, aynı ebeveyn altındaki kardeşler arasında ilk.

İlk çocuk — listedeki ilk ögeyi vurgula

css
CSS Code 
li:first-child {
font-weight: 700;
}

Sonraki adım: :nth-child

:nth-child(odd) veya :nth-child(3) ile şerit veya «her üçüncü» yaparsınız. Önce :first-child otursun, sonra bu kalıplar.

İyi alışkanlıklar

  • Pseudo-sınıf = tek iki nokta (:hover); pseudo-öğe = çift (::) — sonraki oturum
  • Etkileşimli hover’ı her zaman net :focus ile eşleyin
  • Visited renkleri sakin tutun
  • Yalnızca fareyle değil Tab ile de test edin

Kendiniz deneyin

  1. Kısa sayfa: <button>, <input>, birkaç bağlantı, üç <li>’li <ul>.
  2. button:hover { background-color: #0f766e; color: #fff; } ekleyin ve fareyi düğmeye götürün.
  3. input:focus { outline: 2px solid #0f766e; } ekleyin ve Tab ile alana girin.
  4. a:visited { color: #6b21a8; } ekleyin, bir bağlantı açıp dönün.
  5. li:first-child { font-weight: 700; } — yalnızca ilk öge kalın olsun.

Sık hatalar

  • :hover yerine ::hover yazmak — çift iki nokta pseudo-öğe içindir
  • Hover stillerken odak outline’ını yedeksiz silmek
  • :visited’ten her özellik için tam özgürlük beklemek
  • p:first-child’i «sayfada herhangi yerdeki ilk paragraf» sanmak
  • Önemli metni yalnız :hover’a koyup dokunmatik kullanıcının hiç görmemesi

Özet

  • Pseudo-sınıflar tek iki nokta ile durum veya konum seçer
  • :hover ve :focus geri bildirim verir; ikisini de tutun
  • :visited açık bağlantıyı tarayıcı sınırında boyar
  • :first-child ilk çocuğu alır; :nth-child sonraki adımdır
  • Tek iki nokta = pseudo-sınıf; çift = pseudo-öğe
  • Fare, Tab ve kısa bir listeyle pratik yapın

🧠 Bilginizi Test Edin

Başlamaya Hazır

Bilginizi Test Edin

Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör

❓
7
Sorular
🎯
70%
Geçmek İçin
♾️
∞
Süre
🔄
∞
Deneme

📝 Talimatlar

  • Her soruyu dikkatle okuyun
  • Her soru için en iyi cevabı seçin
  • Quiz'i istediğiniz kadar tekrar alabilirsiniz
  • İlerlemeniz üstte gösterilecek
Konu 1 / 1
Css Ders