Selamlar! Nasılsınız, iyi misiniz? Ben bu ara biraz formlarla uğraşıyordum da, aklıma takıldı, dedim ki gel şu CSS’in o süper pratik seçicilerinden bahsedeyim size. Hani şu kullanıcıların doldurduğu o sihirli kutucuklar, seçenekler falan var ya… İşte onlarla nasıl daha akıllıca başa çıkabiliriz, gelin bir bakalım.
Şimdi düşününce, web sitelerinde bir sürü form oluyor değil mi? Kayıt formları, iletişim formları, anketler… Hepsi kullanıcıdan bir şeyler istiyor. Bazen bir metin kutusu, bazen bir checkbox, bazen de bir dropdown menüsü. Bunları hem HTML’de oluşturmak hem de CSS ile stil vermek yetmiyor, bir de bunların durumunu anlamak lazım. Yani kullanıcı bir şeyi seçti mi, doldurdu mu, tikledi mi? İşte tam da burada devreye bizim süper kahraman seçicilerimiz giriyor.
Öncelikle şu :input olayından başlayalım. Bu resmen bir joker gibi düşünün. Form elemanlarının hepsi onun şemsiyesi altında toplanıyor. Yani bir text kutusu da, bir radio button da, bir de submit butonu da :input’un kapsamına giriyor. Bu ne demek oluyor? Tek bir seçiciyle birden fazla form elemanına aynı anda stil verebilirsiniz. Ne güzel değil mi? Mesela tüm input alanlarınıza aynı border’ı veya padding’i vermek istediğinizde tek tek yazmak yerine :input yeterli oluyor.
Bu arada, bazen bir şeyleri seçtiğimizde veya işaretlediğimizde farklı bir şeyler olsun isteriz ya? İşte orada :checked sahneye çıkıyor. Özellikle checkbox ve radio button’lar için biçilmiş kaftan. Bir checkbox’ı işaretlediğinizde label’ının rengi değişsin, ya da bir radio button seçildiğinde etrafına bir çerçeve gelsin… İşte bu gibi durumlar için :checked seçicisi tam aradığınız şey. Çok basit bir mantığı var: ‘Eğer bu eleman seçiliyse, şunu yap!’
Şimdi gel gelelim :selected’a. Bu da dropdown menüleri (yani select elemanları) için geçerli. Hani şu seçeneklerden birini seçtiğimiz kutucuklar var ya? İşte o menüden bir öğe seçildiğinde ona özel bir stil vermek istediğinizde :selected’ı kullanıyorsunuz. Bu da :checked gibi, seçili olan öğeyi yakalayıp ona göre bir şeyler yapıyor.
Hadi gelin bir örnekle pekiştirelim. Diyelim ki bir anket yapıyoruz ve kullanıcılar için renk seçenekleri sunduk. Hangi rengi seçerlerse, seçtikleri rengin kutucuğu daha belirgin olsun istiyoruz. Ya da bir ayar sayfasındayız ve kullanıcı bir seçeneği kapattığında o seçeneğin olduğu satır biraz soluklaşsın. İşte bu tip senaryolarda bu seçiciler hayat kurtarıyor.
Örnek kodlara baktığımızda, aslında ne kadar basit olduklarını daha iyi anlıyoruz. Diyelim ki bir checkbox var ve seçildiğinde label’ının rengi mavi olsun istiyoruz. Normalde belki JavaScript ile yapardık ama CSS ile çok daha hızlı hallediyoruz.
Şöyle bir şey hayal edin:
HTML tarafında şöyle bir yapımız var:
<input type="checkbox" id="renk-secenek"> <label for="renk-secenek">Kırmızı olsun!Şimdi CSS’te ne yapacağız? Çok basit.
// YANLIŞ (Çok basit, seçicilik yok)
input[type="checkbox"] { margin-right: 5px; } label { color: #333; }Bakın bu şekilde checkbox’ın yanına bir boşluk ekledik ve label’ın rengini ayarladık. Ama biz seçili olduğunda farklı bir şey olsun istiyoruz, değil mi? İşte tam buraya :checked geliyor.
// DOĞRU (İşte sihir burada!)
/* Tüm input'lar için genel stil */ :input { padding: 10px; border: 1px solid #ccc; margin-bottom: 10px; box-sizing: border-box; /* Padding ve border'ın genişliğe dahil olmasını sağlar */ }/* Checkbox ve Radio button seçildiğinde */ input:checked { outline: 2px solid blue; /* Seçili olduğunu vurgulamak için */ }
/* Checkbox veya Radio seçildiğinde, onunla ilişkili label'ı hedef alıyoruz */ input:checked + label { color: blue; font-weight: bold; }
/* Select menüsündeki seçili olanı hedef alıyoruz */ select option:selected { background-color: lightblue; color: navy; }
Gördünüz mü? :checked seçicisiyle input’un kendisini seçili olduğunda vurguladık, sonra ‘+’ seçicisiyle de hemen yanındaki label’ı hedef alıp rengini ve fontunu değiştirdik. :selected ile de dropdown’dan seçilen seçeneğin arka planını ve metin rengini değiştirdik. İnanın ki bu kadar basit.
Bu arada, bu seçicilerle sadece stil vermekle kalmayıp, kullanıcı deneyimini de inanılmaz derecede iyileştirebiliyorsunuz. Hani bazen bir form doldururken bir şey seçince hemen altından bir açıklama belirir ya da bir hata mesajı çıkar? İşte bunların bir kısmı bu seçicilerle yapılabiliyor. :checked veya :selected kullanıp, hemen ardından gelen bir elementin görünürlüğünü değiştirebilirsiniz mesela. Bu da kodunuzu daha temiz hale getiriyor, JavaScript’e olan bağımlılığınızı azaltıyor.
Neticede, bu küçük ama etkili seçiciler, formlarla çalışırken bize büyük kolaylık sağlıyor. :input ile genel stillendirme, :checked ile seçim durumlarını yakalama ve :selected ile dropdown seçeneklerini yönetme… Hepsi bir araya geldiğinde harika işler çıkarabiliyorsunuz.
Tek bir sorum var size, bu seçicileri daha önce kullandınız mı? Kullandıysanız nasıl bir faydasını gördünüz? Ben ilk kullanmaya başladığımda, o basitliğine şaşırmıştım açıkçası. Hani bazen en basit şeyler en etkili olabiliyor ya, işte tam olarak öyle bir şey.
Bir de şöyle bir şey var, bazen bu kadar basit görünen şeyler gözden kaçabiliyor. Mesela ben kendi programım sınıfta kaldı derken, bu seçicileri kullanmayı unutmuştum belki de. Neyse efendim, lafı uzatmayayım şimdi.
Bu arada, aklıma geldi, bu seçicilerle ilgili daha detaylı bilgiye ve örneklerin devamına şuradan bakabilirsiniz: Google arama. Bazen şöyle Google’da ufak bir arama yapınca ne kadar çok şeyin aslında ne kadar basit olduğunu görüyorsunuz.
Sonuç olarak, web geliştirirken bu gibi pratik CSS seçicilerini bilmek ve kullanmak, hem işinizi kolaylaştırıyor hem de ortaya daha kullanıcı dostu ve estetik tasarımlar çıkarmanıza yardımcı oluyor. Denemediyseniz, ilk fırsatta bir projede kullanmanızı tavsiye ederim. Ne güzel değil mi?
Geçenlerde bir kamp gezisi yapmıştık eşimle ve çocuğumla, dönüş yolunda arabada oturmuş, dün yazdığım kodları düşünüyordum. Birden aklıma takıldı, acaba şöyle bir CSS seçicisiyle bir input’un focus olup olmadığını da yakalasak nasıl olurdu diye. Hani böyle bir şey yazınca, alanın etrafı hafifçe parlar ya? Dedim ki, ‘Ulan bu seçiciler harbiden işe yarıyor’ diye düşündüm. Daha sonra eve varınca hemen denedim, evet, :focus seçicisiyle de harika oluyormuş. Demek ki bazen yolda giderken bile aklımıza yeni fikirler gelebiliyor, tabii biraz da teknik düşünüyorsak 🙂
Bu arada, benim gibi dağcılıkla ilgilenen varsa, dağda bazen hava aniden değişir ya, işte o an hazırlıklı olmak gerekir. Tıpkı kod yazarken de bazen bir seçiciyi bilmek gibi. Bilmediğiniz bir seçici yüzünden bütün tasarımınız çöp olabilir, ya da bildiğiniz bir tanesiyle her şeyi kurtarabilirsiniz. Yani aslında her şey hazırlıklı olmakla ilgili sanırım. Neyse, şimdilik bu kadar!