Sözde Sınıflar
Sözde Sınıflar (Pseudo Classes) CSS’de, HTML yapısını değiştirmeden bir öğenin belirli durumlarına veya konumlarına stil uygulamamızı sağlayan özel seçicilerdir. Bir evi inşa ederken, duvarları değiştirmeden mobilyaları ve dekorları konumlandırmak gibi, sözde sınıflar da öğelerin görünümünü kullanıcı etkileşimine göre değiştirir.
Önemi, web sayfalarına dinamik ve kullanıcı odaklı etkileşimler kazandırmasında yatar. Örneğin, kişisel web sitenizde :hover ile bağlantılar üzerine gelindiğinde renk değişimi sağlayabilir, bir blogda :first-child ile ilk yazıyı vurgulayabilir, e-ticaret sitelerinde :nth-child ile ürünleri alternatif renklerle sunabilir, haber sitelerinde :visited ile ziyaret edilen bağlantıları ayırt edebiliriz.
Bu eğitimde :hover, :focus, :first-child, :nth-child, :disabled ve :visited gibi sık kullanılan sözde sınıfları öğreneceksiniz. Sözde sınıfların sözdizimini, nasıl çalıştığını ve pratik uygulamalarını detaylı şekilde anlayacak, mobil uyumlu, okunabilir ve bakım kolaylığı sağlayan web sayfaları tasarlayabileceksiniz. Bu süreç, her kitabın yerli yerinde olduğu bir kütüphane düzenlemek gibidir; her öğe doğru durumda ve doğru stil ile sunulur.
Temel Örnek
css/* Basic pseudo-class example for links and list items */
a:hover {
color: #e67e22; /* Change link color on hover */
text-decoration: underline;
}
li:first-child {
font-weight: bold; /* Highlight first list item */
}
input:focus {
border-color: #2980b9; /* Highlight input field on focus */
}Yukarıdaki örnek üç temel sözde sınıfı göstermektedir. a:hover, kullanıcının fareyi bağlantının üzerine getirdiğinde rengini değiştirir ve alt çizgi ekler, blog ve haber sitelerinde etkileşimi artırır. Sözdizimi iki nokta üst üste (:) ile başlar ve ardından sözde sınıfın adı gelir.
li:first-child, bir listenin ilk öğesini seçer ve öne çıkarır; özellikle blog girişleri veya ürün listelerinde faydalıdır.
input:focus, kullanıcı bir form alanına tıkladığında görsel geri bildirim sağlar. Sözde sınıflar DOM’u değiştirmez, yalnızca belirli durumlarda stil uygular. Yeni başlayanlar bazen çalışmayan sözde sınıflarla karşılaşabilir; bu genellikle seçicilerin özgüllüğü veya ebeveyn öğe durumlarıyla ilgilidir.
Pratik Örnek
css/* Practical pseudo-class usage in an e-commerce product list */
ul.products li:nth-child(odd) {
background-color: #f9f9f9; /* Style odd product items */
}
ul.products li:nth-child(even) {
background-color: #ffffff; /* Style even product items */
}
button:disabled {
opacity: 0.5; /* Dim disabled buttons */
cursor: not-allowed;
}
a:visited {
color: #7f8c8d; /* Change color of visited links */
}Bu örnekte, :nth-child() kullanarak ürün listesindeki öğeleri alternatif renklerle biçimlendiriyoruz. Bu, bir odayı dekorlarken mobilyaları sıra ile yerleştirmek gibidir; görsellik ve okunabilirlik artar.
button:disabled ile devre dışı bırakılmış düğmeler belirginleşir ve kullanıcı etkileşimi sınırlandırılır.
a:visited, ziyaret edilen bağlantıların rengini değiştirir; kullanıcı hangi içeriklere göz attığını kolayca görebilir. Bu sözde sınıflar sayesinde JavaScript kullanmadan interaktif ve kullanıcı dostu arayüzler oluşturabilirsiniz.
En iyi uygulamalar: mobile-first tasarım, performans optimizasyonu için basit seçiciler kullanmak, CSS’i temiz ve bakım kolaylığı sağlayacak şekilde düzenlemek.
Yaygın hatalar: özgüllük çatışmaları, mobil cihazlarda :hover ve :focus’un göz ardı edilmesi, aşırı stil geçersiz kılma, pseudo-class’ların developer tools ile test edilmemesi.
Hata ayıklama ipuçları: tarayıcı geliştirici araçları ile öğeleri incelemek, sözde sınıfları adım adım uygulamak, farklı cihazlarda test etmek. Stil ve sözde sınıfları ayrı tutmak, bakımı ve ölçeklenebilirliği artırır.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| :hover | Fare ile üzerine gelindiğinde stil uygular | a:hover {color:#e67e22;} |
| :focus | Form alanı odaklandığında stil uygular | input:focus {border-color:#2980b9;} |
| :first-child | İlk çocuk öğeyi seçer | li:first-child {font-weight:bold;} |
| :nth-child(n) | Belirli sıra numarasındaki öğeyi seçer | li:nth-child(odd){background:#f9f9f9;} |
| :disabled | Devre dışı öğeler için stil uygular | button:disabled {opacity:0.5;} |
| :visited | Ziyaret edilen linkleri stilize eder | a:visited {color:#7f8c8d;} |
Özetle, sözde sınıflar, HTML yapısını değiştirmeden öğelerin durumuna ve konumuna göre stil uygulamanın güçlü bir yoludur. DOM ile entegre çalışır ve JavaScript ile birlikte daha dinamik arayüzler oluşturulabilir.
Sonraki adımlar: :not() ve :has() gibi ileri düzey sözde sınıfları öğrenmek, Flexbox veya Grid ile kombinleyerek tasarım üzerinde tam kontrol sağlamak. Kendi kişisel siteniz, blog ve e-ticaret projelerinizde uygulayarak profesyonel, etkileşimli ve mobil uyumlu CSS geliştirme becerilerinizi pekiştirebilirsiniz.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 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